Css3新特性总结之边框与背景(二)
时间:2022-04-22
本文章向大家介绍Css3新特性总结之边框与背景(二),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、条纹背景
- 利用background为linear-gradient函数实现,linear-gradient取值如下:
- <angle>:角度,渐变的方向
- to left right top bottom
- color:指定颜色
- color-stop:指定渐变的起止颜色
- length:用长度值指定起止色的位置,不可为负值
- percentage:用百分比指定起止色的位置
- 语法格式:linear-gradient([[<angle>|to <side-to-corner>],]? <color-stop>[,<color-stop>]+)
- side-to-corner:[left|right] || [top||bottom]
- color-stop: <color>[<length>|<percentage>]?
- 示例代码(斜角条纹):
background: linear-gradient( 40deg, #fb3 5px, #58a 15px);
width: 200px;
height: 100px;
margin: 0px auto;
background-size: 30px 30px;
- 当linear-gradient添加多组值的时候,前面的值会覆盖后面的,如下代码:
background-image:linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0)
说明:linear-gradient(45deg, transparent 75%, #bbb 0)的信息会被linear-gradient(45deg, #bbb 25%, transparent 0) 覆盖。
- 示例代码:
width: 200px;
height: 200px;
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0px 0px, 12.5px 12.5px, 12.5px 12.5px, 25px 25px;
background-size: 25px 25px;
代码解释:
* image与position一对一的相互参照;image实现图形,position实现定位 * 每个图形都是一个小的三角形,两个三角形相互拼接成一个正方形,然后近一步定位即可。 * 注意角度的旋转,他是顺时针的。
- linear-gradient还可以合并写法,也就是定义一个角度,后面跟随多组颜色值
linear-gradient(45deg, #bbb 25%, transparent 0,
transparent 50%, #bbb 0, transparent 75%, #bbb 0)
- css可以用(反斜杠)进行换行,如上
- 不规则条纹
- 主要利用background-size多组值实现,第组值按照自定的间距进行平铺
- 最与数学中的最大公约倍数有关联,他们会以最大分倍数的宽度重复, 如果让他看上去更随机就需要避开此条规则
- 示例代码:
.wrap{
width: 600px;
height: 100px;
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg,#fb3 10px, transparent 0),
linear-gradient(90deg,#ab4 20px, transparent 0),
linear-gradient(90deg,#655 30px, transparent 0);
background-size: 40px 100%, 60px 100%, 80px 100%;
}
.wrap-thr{
margin-top: 5px;
width: 600px;
height: 100px;
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg,#fb3 10px, transparent 0);
background-size: 40px 100%;
}
.wrap-one{
margin-top: 5px;
width: 600px;
height: 100px;
background: hsl(20, 40%, 90%);
background-image:linear-gradient(90deg,#ab4 20px, transparent 0);
background-size: 60px 100%;
}
.wrap-two{
margin-top: 5px;
width: 600px;
height: 100px;
background: hsl(20, 40%, 90%);
background-image:linear-gradient(90deg,#655 30px, transparent 0);
background-size: 80px 100%;
}
- 复杂边框背景
- 方案一 利用border-image实现,border-image使用的是九宫格伸缩法
- 方案二 利用背景多层覆盖原理实现,先实现多层有颜色的背景,最后加上一层白色的。
.wrap{
width: 200px;
height: 50px;
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,red 0, red 12.5%,
transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
}
.wrap-one{
margin-top: 5px;
width: 200px;
height: 50px;
padding: 1em;
border: 1em solid transparent;
background: repeating-linear-gradient(-45deg,
transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
}
.wrap-two{
margin-top: 5px;
width: 200px;
height: 50px;
padding: 1em;
border: 1em solid transparent;
background:
repeating-linear-gradient(-45deg, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
}
.wrap-thr{
margin-top: 5px;
width: 200px;
height: 50px;
padding: 1em;
border: 1em solid transparent;
background: repeating-linear-gradient(-45deg,transparent 0, red 50%) 0 / 5em 5em;
}
- 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 实例
- Matplotlib自定义坐标轴刻度的实现示例
- Python基于time模块表示时间常用方法
- ITK 实现多张图像转成单个nii.gz或mha文件案例
- 一文轻松掌握python语言命名规范规则
- php原生数据库分页的代码实例
- python对一个数向上取整的实例方法
- Laravel框架FormRequest中重写错误处理的方法
- python名片管理系统开发
- PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
- PHP实现微信商户支付企业付款到零钱功能
- yii2 开发api接口时优雅的处理全局异常的方法
- PHP调用全国天气预报数据接口查询天气示例
- Python使用itcaht库实现微信自动收发消息功能
- Laravel源码解析之路由的使用和示例详解
- PHP实现的用户注册表单验证功能简单示例