Css3新特性总结之边框与背景(一)
时间:2022-04-22
本文章向大家介绍Css3新特性总结之边框与背景(一),主要内容包括一、半透明边框、二、多重边框实现、三、背景的定位、四、多重圆角边框、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
本系列主要总结Css3一些新特性的认识,来源于《css揭秘》书。
一、半透明边框
- css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360);s:饱合度(0%~100%);l:亮度(0%~100%);a:透明度(0~1)
- background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border);padding-box(背景颜色扩散到padding);content-box(背景颜色扩展到content)
- 示例代码:
width:200px;
height:200px;
background: rebeccapurple;
border: 10px solid hsla(300, 0%, 50%, 0.5);
background-clip: padding-box; //去掉和添加上此项可以看出效果
二、多重边框实现
- box-shadow:设置或检索对象阴影,格式:box-shadow: none | <length>{2,4} && color? | inset?
- length<1>: 水平偏移,可负值
- length<2>: 垂直偏移,可负值
- length< 3 >: 阴影模糊值,不可负值
- length<4>:外延长度,可负值
- <color>:阴影颜色
- inset:表示为内阴影,为空表示外阴影
- 可以设置多组效果,多组之间用逗号隔开(利用可box-shadow可重叠特性来设置多重边框,但边框样式不可做也条纹、虚线之类的)
- 如果要设置检索文本阴影,用text-shadow属性
- outline实现两个边框(只能实现两重边框,但边框样式灵活)
三、背景的定位
- background-position:背景定位,值说明如下
- center,left,top,bottom,right等都是表示背景从何地开始显示,如果设置重复平铺,会有不同的效果
- 值可是数值或百分比:background-position: right 20px bottom 30px;
- background-origin:背景图片的定位参数,三值context-box,padding-box,border-box等。
- clac()计算宽度的函数
- 示例代码如下:
background-image: url('../img/bck.png');
background-repeat: no-repeat;
background-size: 40px 40px;
width:200px;
height:200px;
margin-top:10px;
border: 5px solid red;
--background-position: right 0px bottom 0px;
background-origin: content-box;
background-position: calc(100% - 50px);
padding: 10px;
四、多重圆角边框
- box-shadow:他的圆角是会跟随border-radius走的,而outline且不会。
- 最小阴影(box-shadow)计算公式为:勾股定理,设置阴影时应该大于此值
- 示例代码:
margin: 10px auto;
width: 10em;
height: 8em;
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #556;
- 学习docker on windows (1): 为什么要使用docker
- 使用VS Code开发asp.net core (下)
- 使用VS Code开发asp.net core (上)
- 小程序开发总结
- Silverlight Load Client Image 加载客户端图片
- 使用xUnit为.net core程序进行单元测试(4)
- 使用xUnit为.net core程序进行单元测试(3)
- 使用xUnit为.net core程序进行单元测试(2)
- 使用xUnit为.net core程序进行单元测试(1)
- 用 Identity Server 4 (JWKS 端点和 RS256 算法) 来保护 Python web api
- asp.net core 2.0 查缺补漏
- SQL Server 性能优化之——T-SQL NOT IN 和 NOT Exists
- SQL Server 性能优化之——重复索引
- SQL Server 性能优化之——系统化方法提高性能
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- C++条件分支结构
- USACO Training Section 1.1 贪婪的送礼者Greedy Gift Givers
- 数学--数论--HDU--5878 Count Two Three 2016 ACM/ICPC Asia Regional Qingdao Online 1001
- ACM-ICPC 2019 山东省省赛D Game on a Graph
- 数学--数论--HDU6919 Senior PanⅡ【2017多校第九场】
- 数学--数论--Alice and Bob (CodeForces - 346A )推导
- ACM-ICPC 2019 山东省省赛 M Sekiro
- 数学--数论--HDU2136 Largest prime factor 线性筛法变形
- ACM-ICPC 2019 山东省省赛 C Wandering Robot
- 数据库SQL语言从入门到精通--Part 2--MySQL安装
- ACM-ICPC 2019 山东省省赛 A Calandar
- POJ 1845-Sumdiv(厉害了这个题)
- 数据库SQL语言从入门到精通--Part 1--SQL语言概述
- DP背包(一)
- 程序员最喜欢用的在线代码编译器,什么?你竟然不知道!可以在网页敲代码,运行调试!