读css揭秘 -- 个人的css 重学路

最新推荐文章于 2024-08-01 22:12:00 发布

weixin_33709364

最新推荐文章于 2024-08-01 22:12:00 发布

阅读量70

点赞数

原文链接：https://juejin.im/post/5c8e3a4cf265da680d2d3bf3

版权

前言

本文是个人读css揭秘做的读书笔记的进一步整理，方便可以更好理解这本书，一些css技巧内容

background-clip 属性 -- 通透边框案例

如果想想做到图片这种效果透明边框需要使用css的'background-clip' 属性

background-clip 介绍

1. 'background-clip：border-box | padding-box | content-box | text'
2. 'border-box'：从border区域（含border）开始向外裁剪背景。
3. 'padding-box'：从padding区域（含padding）开始向外裁剪背景。
4. 'content-box'：从content区域开始向外裁剪背景。
5. 'text'：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果
复制代码

对background-clip 中border-box 图文理解

代码展示效果:
放大效果：

1.下面代码使用了'border-box' 也就是默认效果，将这个效果放大后可以发现默认状态下背景延伸在'border' 边框下
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background-color: beige;
            background-clip:border-box; 
            border: 2px  dotted  red;
            margin: 50% auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
复制代码

对background-clip 中padding-box 图文理解

放大图片：

1.当使用'padding-box ' 属性通过放大图可以看出来，整个背景显示区域紧贴着整个边框最内部
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background-color: beige;
            background-clip:padding-box; 
            border: 2px  dotted  red;
            margin: 50% auto;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>
复制代码

对background-clip 中content-box 图文理解

正常效果：
使用了 content-box：

1.设想下如果在div中设置了'padding' 内边距，当我们在div中设置了背景色，并且添加了内容正常效果是什么样？
2.如图正常效果和使用了'content-box' 效果
3.根据图片可以看出背景颜色只会保持在内容区域
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background-color: beige;
            background-clip:content-box; 
            border: 2px  dotted  red;
            margin: 50% auto;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>111</div>
</body>
</html>
复制代码

利用属性去实现透明边框效果

1.根据上面的属性讲解，其实就可以知道，因为默认情况下'border-box'背景会延伸到边框下面，即使我们让背景透明，所展示映射
的也是当前div的背景，也不是我们希望的div所在的背景上的背景色
2.想实现因此使用'background-clip: padding-box;'
3.可以使用'rgba' 或者 'hsla' 来设置边框透明
4.em 单位表示，子元素字体大小的em是相对于父元素字体大小
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
	/* background: url('http://csssecrets.io/images/stone-art.jpg'); */
    background: skyblue
}

.div1 {
	border: 10px solid hsla(0,0%,100%,.5) ;
	background: white;
	background-clip: padding-box;
	
	/* styling */
	max-width: 20em;
	padding: 2em;
	margin: 2em auto 0;
	font: 100%/1.5 sans-serif;
}

    </style>
</head>
<body>
    <div class="div1">
        测试11
    </div>
</body>
</html>
复制代码

weixin_33709364

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
读css揭秘 -- 个人的css 重学路

前言本文是个人读css揭秘做的读书笔记的进一步整理，方便可以更好理解这本书，一些css技巧内容background-clip 属性 -- 通透边框案例如果想想做到图片这种效果透明边框需要使用css的'background-clip' 属性background-clip 介绍1. 'background-clip：border-box | padding-box | content-...
复制链接

扫一扫