一、半透明边框
- 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)
- 示例代码:
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; 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; 10em; height: 8em; background: tan; border-radius: .8em; padding: 1em; box-shadow: 0 0 0 .6em #655; outline: .6em solid #556;
五 、条纹背景
- 利用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); 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) 覆盖。
- 示例代码:
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{ 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; 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; 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; 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{ 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; 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; 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; 200px; height: 50px; padding: 1em; border: 1em solid transparent; background: repeating-linear-gradient(-45deg,transparent 0, red 50%) 0 / 5em 5em; }