簡介
圖片也可以作為邊框,以下是實例演示
注意
實現該效果必須添加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 officiisiure beatae non ipsum sed temporibus nisi quas. Iste dolorem minus quis. Adipiscinecessitatibus 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. Porroquisquam in quis molestias dolores corporis, earum animi voluptatibus! Eligendi aliasdignissimos at ipsam totam iusto voluptatibus odio dicta. Excepturi cumque voluptatum enimaspernatur quo non dolorum minus explicabo. Praesentium necessitatibus nulla cum quaeratnumquam sed consequuntur culpa sequi.</p></body>
</html>