《CSS揭秘》-背景与边框
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 的扩展语法方案
《CSS揭秘》-背景与边框相关推荐
- CSS浮动+背景图片+边框+文字排版+段落设置
一.CSS浮动 1.简介 默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动float属性属性值 说明 left 元素向左浮动 right 元素向右浮动 none 默认值,元素不浮动浮动意 ...
- html多重边框,中间空白,CSS揭秘之多重边框的实现
多重边框的两种实现方案: border-shadow outline Mutiple border .common { width: 25vw; height: 20vh; margin: 10%; ...
- CSS揭秘:6.复杂的背景图案(下)
文章目录 前言 一.网格Svg svg css 小结 相关阅读 前言 上一篇文章中我们学会了如何使用实现棋盘背景的方法,但是显而易见的代码量是比较多的.那么怎么可以优化代码量,降低维护成本呢? 一.网 ...
- CSS揭秘:5.条纹背景(上)
文章目录 条纹背景 CSS线性渐变 css线性渐变小结 background-size 水平条纹 水平 First Try 水平 Second Try 水平 Third Try 水平 Forth Tr ...
- CSS揭秘:6.复杂的背景图案(上)
文章目录 前言 一.网格 1. 实色网格 2. 边框网格 3. 波点 4. 棋盘 小结 相关阅读 前言 上一篇文章中我们学会了如何使用渐变实现条纹状的背景,但是实际上条纹背景并不是我们能实现的唯一的背 ...
- 《CSS揭秘》-总结47个Css技巧(一):常用的背景与边框技巧
注:本文案例来源于<CSS揭秘>这本书. 1. 设置半透明边框无效? 使用 background-clip padding-box 解决. background white backgro ...
- css揭秘实战技巧- 背景与边框 [一]
前言 这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 "css揭秘&qu ...
- CSS揭秘(二)背景与边框
Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...
- css揭秘笔记——背景与边框
背景与边框 半透明边框 知识点 background-clip: [border-box] |[padding-box] | [content-box];hsla(<色相>, <饱和 ...
- css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...
百度前端技术学院2017于2月24日开始进行,一共有6个学院可供学习,分别是小薇学院(html/css基础).斌斌学院(js基础).耀耀学院(小游戏/交互).商业平台学院(web/ios/androi ...
最新文章
- 别再被 Python 洗脑了!!
- 大量数据快速导出的解决方案-Kettle
- 用Anko和Kotlin实现Android上的对话框和警告提示(KAD 24)
- python三级联动菜单_详解element-ui级联菜单(城市三级联动菜单)和回显问题
- pandas 数据分析使用
- JS组件系列——Bootstrap Select2组件使用小结
- go按行读取数据的坑
- 闭包会造成内存泄漏吗?
- 看图说说class文件结构(部分)
- 74. PHP 计数器
- CentOS 7.2.5 安装 Redis 与 远程访问
- xshell与虚拟机VMware中centos6.7系统突然连不上
- 开发监控云组态软件的组成
- 《Python金融大数据风控建模实战》第4章 数据清洗与预处理
- 【Analytics Kit】【FAQ】集成华为分析服务问题集合 SDK初始化失败/应用调试界面没有数据/常见错误提示
- 模块化笔记软件 Anytype 综合评测
- HTTP: CDN缓存机制
- 00900网页设计与制作多选题
- 高等数学笔记:三重积分下的坐标系变换
- deepin官方历史版本存档