《CSS揭秘》-背景与边框

tangr206 发布于2019-08-30 15:55 / 2665人阅读

摘要：给一个容器设置一层白色背景和一道半透明白色边框。思路实际是设置的背景会延伸到边框所在的区域的下层，可以通过属性调整背景的默认行为。优点边框样式十分灵活。缺点只适用于双层边框的场景边框不一定会贴合属性产生的圆角。

1.给一个容器设置一层白色背景和一道半透明白色边框。

思路：实际是设置的背景会延伸到边框所在的区域的下层，可以通过background-clip属性调整背景的默认行为。

background-clip 属性：背景的绘制区域

值	描述
border-box	背景被裁剪到边框盒
padding-box	背景被裁剪到内边距框
content-box	背景被裁剪到内容框

border: 20px solid hsla(0, 0%, 100%, .5);
background: #fff;
background-clip: padding-box;

2. 多重边框实现

box-shadow 方案

思路：利用box-shadow的第四个参数（扩张半径）指定正负值，让投影面积加大或减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的投影像一道实线边框。优点：可以获得更多层边框；贴合border-radius属性产生圆角。缺点：只能描绘直线一种样式。

box-shadow 属性：向框添加一个或多个阴影。支持逗号分割语法，我们可以创建任意数量的投影。box-shadow是层层叠加的，第一层投影位于最顶层，依次类推。因此，需要按规律调整扩张半径。

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影 (outset) 改为内部阴影

box-shadow: h-shadow v-shadow blur spread color inset;

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0, 0, 0, .5);

注意：

投影的行为不会影响布局，也不会收到box-sizing属性的影响。不过可以通过内边距或外边距来额外模拟出边框所需要占据的空间。

投影出现在元素的外圈，不会响应鼠标事件，比如悬停或点击。你可以给box-shadow属性加上inset关键字，使投影绘制在元素的内圈，此时需要增加额外的内边距来腾出足够的空隙。

outline 方案

思路：只需要两层边框，可以先设置一层常规边框，再加上outline（描边）属性产生外层边框。优点：边框样式十分灵活。缺点：只适用于双层边框的场景；边框不一定会贴合border-radius属性产生的圆角。

outline属性：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

值	描述
outline-color	规定边框的颜色
outline-style	规定边框的样式
outline-width	规定边框的宽度

background: yellowgreen;
outline: 5px solid deeppink;

设置box-radius值效果：

通过设置outline-offset属性控制它与元素边缘之间的距离

background: #485152;
outline: 1px dashed #fff;
outline-offset: -10px;

3. 针对容器某个角对背景图片做偏移定位

background-position 的扩展语法方案

服务器托管超融合服务器 html5与边框间距 css与html html与css div与css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117293.html

[CSS]《CSS揭秘》第二章——背景与边框

摘要：半透明边框相关语法多重边框方案需要注意的是，上面所创建的边框是伪边框，并不响应鼠标事件。方案以左上角为基准。图像边框连续的图像边框属性规定背景的绘制区域。半透明边框 border:10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; showImg(htt...

elina 2019-08-30 15:53 评论0 收藏0
css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
CSS揭秘之《边框图像》

摘要：如果我们想把一图应用到边框而非背景，就像下面的这样效果可能最容易的方法就是两层标签，外层标签设置背景图片，内层标签设置背景色为白色就达到了效果，可是如果只用一层标签呢，怎么办其实思路是在背景图片之上，再叠加一层纯白的实色背景代码如下如果我们想把一图应用到边框而非背景，就像下面的这样效果 showImg(https://segmentfault.com/img/bVUhG5?w=194...

Pikachu 2019-08-20 19:08 评论0 收藏0
CSS揭秘之《边框图像》

摘要：如果我们想把一图应用到边框而非背景，就像下面的这样效果可能最容易的方法就是两层标签，外层标签设置背景图片，内层标签设置背景色为白色就达到了效果，可是如果只用一层标签呢，怎么办其实思路是在背景图片之上，再叠加一层纯白的实色背景代码如下如果我们想把一图应用到边框而非背景，就像下面的这样效果 showImg(https://segmentfault.com/img/bVUhG5?w=194...

philadelphia 2019-08-05 12:00 评论0 收藏0
CSS揭秘之《边框图像》

摘要：如果我们想把一图应用到边框而非背景，就像下面的这样效果可能最容易的方法就是两层标签，外层标签设置背景图片，内层标签设置背景色为白色就达到了效果，可是如果只用一层标签呢，怎么办其实思路是在背景图片之上，再叠加一层纯白的实色背景代码如下如果我们想把一图应用到边框而非背景，就像下面的这样效果 showImg(https://segmentfault.com/img/bVUhG5?w=194...

TalkingData 2019-08-29 13:19 评论0 收藏0