正文

css3新特性总结之边框与背景

Sam先生的博客  2022-02-07  179

关键词：

一、条纹背景

利用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, 
	ransparent 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%, 
            	ransparent 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,
            	ransparent 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;
        }

技术分享

css3与页面布局学习总结——css3新特性（阴影动画渐变变形伪元素等）

目录一、阴影1.1、文字阴影1.2、盒子阴影二、背景2.1、背景图像尺寸2.2、背景图像显示的原点三、伪元素3.1、before3.2、after3.3、清除浮动四、圆角与边框4.1、border-radius圆角4.2、边框图片border-image五、变形transform5.1、rotate()2D旋转5.... 查看详情

css3新特性（阴影动画渐变变形伪元素等）css3与页面布局学习总结——css3新特性（阴影动画渐变变形伪元素等）

css3新特性应用总结

一、半透明边框css3最好用hsla，而不是rgba，hsla是：h：颜色值(0~360)；s：饱合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1)background-clip：裁剪背景颜色，默认为border-box(背景颜色扩散到border）；padding-box（背景颜色扩散到padding）；conte... 查看详情

css3最新特性总结(代码片段)

Css3最新特性总结1、 css3新特性参照资源：http://www.w3school.com.cn/css3/css3_border.asp总结1）边框border-radiusbox-shadowborder-image 2）背景属性描述注意事项background-clip background-origin &n 查看详情

前端基础之css

1.css3的新特性有哪些（1）CSS3选择器（基本、属性、伪类具体见下）（2）CSS3边框与圆角圆角border-radius属性：border-top-left-radius左上角border-top-right-radius右上角border-bottom-right-radius右下角border-bottom-left-radius左下角（3）CSS3背景与渐... 查看详情

css3（六css3新特性（阴影动画渐变变形伪元素等）

一、阴影1.1、文字阴影1.2、盒子阴影二、背景2.1、背景图像尺寸2.2、背景图像显示的原点三、伪元素3.1、before3.2、after3.3、清除浮动四、圆角与边框4.1、border-radius圆角4.2、边框图片border-image五、变形transform5.1、rotate()2D旋转5.2、... 查看详情

css3新特性应用之结构与布局

一、自适应内部元素利用width的新特性min-content实现width新特性值介绍：fill-available，自动填充盒子模型中剩余的宽度，包含margin、padding、border尺寸，他让非block元素也可实现宽度100%;max-content：假设容器有足够的宽度，足够的空间... 查看详情

css3新特性

CSS3边框：border-radius（倒圆角）box-shadow （盒子阴影）border-image（边界图片）CSS3背景：background-size（属性规定背景图片的尺寸。）background-origin（属性规定背景图片的定位区域。背景图片可以放置于content-box、padding-box或border-b... 查看详情

css3新特性

css3新特性：1.css3重要模块：1.1选择器1.2盒模型1.3背景和边框1.4文字特效1.52D/3D转换1.6动画1.7多列布局1.8用户界面 2.css3边框2.1border-radius//圆角<div>border-radius</div>div{border:2pxsolid#a1a1a1;padding:10px40px;background: 查看详情

css3与页面布局学习总结——css3新特性（阴影动画渐变变形伪元素等）

CSS3在CSS2.1的基础上新增加了许多属性，这里选择了较常用的一些功能与大家分享，帮助文档中有很详细的描述，可以在本文的示例中获得帮助文档。一、阴影1.1、文字阴影text-shadow<length>①：第1个长度值用来设置对象的阴影... 查看详情

css3（边框，背景，字体，颜色之rgba与透明度opcity，图片和渐变颜色）

边框:盒子圆角：border-radius：5px/20%；border-radius:5px4px3px2px;左上，右上，右下，左下。盒子阴影：box-shadow：box-shadow:x轴偏移量y轴偏移量阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径阴影颜色投影方式注意：inset是指阴... 查看详情

css3边框与背景

一、css3边框1、border-image边框border-image:url(xxx.png)numberstretch很好理解就是拉伸，有多长拉多长。repeat(和4角上同等大小图片进行平铺当边框中间区域长度不是4角图片大小的整数倍时会被切割)铺满(round)(4角上的图片进行拉伸平铺不... 查看详情

css3新特性应用之形状

一、自适应椭圆*border-radius特性： *可以单独指定水平和垂直半径，并且值可以是百分比，用/（斜杠）分隔这两个值即可（可以实现自适应宽度椭圆）。 *还可以单独指定四个角度不同的水平和垂直半径... 查看详情

css3新特性

1、特效border-radius:圆角box-shadow/text-shadow:阴影-webkit-gradient:渐变background-orign:用来决定background-position计算的参考位置。background-clip:用来确定背景的裁剪区域。background-size:设置背景图片的大小。multiple-backgrounds:多查看详情

css3基础-选择器+边框与圆角+背景与渐变

Css3选择器相关： section>div直接子元素选择器div+article相邻兄弟选择器（在元素之后出现）div~article通用兄弟选择器（在元素之后出现）属性选择器：a[href]{text-decoration:none;}a[href="#"]{color:#f00;}/*包含two且属性值用空格... 查看详情

html5与css3jquery部分知识总结

一、 HTML5为什么需要HTML5什么是HTML5HTML5现状及浏览器支持HTML5优点与缺点HTML5语法规则与文档声明HTML5新增表达标签HTML5多媒体组件HTML5之canvas二、 CSS3CSS3简介CSS3有什么（边框、圆角、背景、渐变... 查看详情

html5与css3jquery部分知识总结

一、 HTML5为什么需要HTML5什么是HTML5HTML5现状及浏览器支持HTML5优点与缺点HTML5语法规则与文档声明HTML5新增表达标签HTML5多媒体组件HTML5之canvas二、 CSS3CSS3简介CSS3有什么（边框、圆角、背景、渐变、文本效... 查看详情