简介
图片也可以作为边框,以下是实例演示
注意
实现该效果必须添加border样式,且必须位于border-image-socure之前
否则不会生效
实例
<html lang="en"> <head> <style> p { width: 600px; margin: 200px auto; border: 30px solid; //核心代码------------------- border-image-source: url(img.jpg);//设置图片来源 border-image-slice: 30; //设置切割大小 border-image-repeat: round; //设置填充模式 //核心代码------------------- padding: 35px; color: aliceblue; box-shadow: 15px 15px 10px #929696; } </style> </head> <body> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, consectetur? Dignissimos officiis iure beatae non ipsum sed temporibus nisi quas. Iste dolorem minus quis. Adipisci necessitatibus eligendi illo rerum recusandae. Sed dolore laudantium natus rem ex pariatur, laborum officiis esse! Delectus tenetur mollitia alias distinctio temporibus dolore. Corrupti, et voluptate? Non est molestias magnam recusandae porro nihil obcaecati nobis rerum. Porro quisquam in quis molestias dolores corporis, earum animi voluptatibus! Eligendi alias dignissimos at ipsam totam iusto voluptatibus odio dicta. Excepturi cumque voluptatum enim aspernatur quo non dolorum minus explicabo. Praesentium necessitatibus nulla cum quaerat numquam sed consequuntur culpa sequi. </p> </body> </html>
复制