了解CSS

来源：互联网发布：脸型扫描软件看脸型编辑：程序博客网时间：2024/06/04 22:41

background

效果图

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        div {            width: 200px;            height: 200px;            border: 1px black solid;            background:                 url('../1.jpeg') no-repeat top right / 2em 2em,                url('../1.jpeg') no-repeat bottom right / 2em 2em,                url('../1.jpeg') no-repeat top left / 2em 2em,                url('../1.jpeg') no-repeat bottom left / 2em 2em,                url('../1.jpeg') no-repeat center center / 2em 2em;        }    </style></head><body>    <div></div></body></html>

background-clip

这里写图片描述
background-clip: padding-box 背景不会侵入边框所在的范围
background-clip: border-box 默认值，背景会被元素的border box（边框的外沿框）裁切掉

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        div {            width: 100px;            height: 100px;            background: white;            border: 10px solid hsla(0, 0%, 100%, .5);            background-clip: padding-box;        }        body {            background: pink;        }    </style></head><body>    <div></div>    </body></html>

阅读全文

0 0