❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：

文章目录

• text-shadow
• text-overflow
• 边框图片
• • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat
• 透明度
• • Graceful Degradation(优雅降级)
• 小米轮播图子菜单另一种实现

text-shadow

• text-shadow：x y blur-radius color；x是水平偏移量，y是垂直偏移量，blur-radius是模糊半径。阴影不影响布局，可以写好几层。

text-overflow

• 这个可以设置文本超出去后的样式，只能用在单行文本上，必须搭配overflow：hidden和whtie-space：nowrap使用
  
  

边框图片

• 选取一个图片，得到这八份变成一个边框，首先要是用边框图片，得先设置一个边框，然后用slice裁剪出一个边框

border-image-source

• border-image-source:url(xxx);可以设置边框图片

border-image-slice

• border-image-slice:36 fill;36像素就是从边框最外到最里面的距离是36个像素，如果后面加了一个fill，那么原来的图片就会填充元素，并且可以盖住背景图片
• 
  

border-image-width

• border-image-width：80px，这个可以控制边框的宽度，边框向内蔓延80px，这个不影响布局。

border-image-outset

• border-image-outset:3px;这个可以控制外边框的位置可以向往蔓延。

border-image-repeat

• border-image-repeat，值可以是repeat（第一张在正中间重复，然后两边开始重复），round（取整重复），stretch（拉伸重复）

透明度

• 关键字是opacity，取值是0-1，透到0就完全没了，父元素变透明了，子元素也会跟着变透明。
• rgba的a也是控制透明度的。

Graceful Degradation(优雅降级)

• 对于旧浏览器不认识透明度，可以使用优雅降级的方法。浏览器更新，就看的更好，浏览器老，就保证还能用。

p{color:red;color:rgba(255,0,0,0.75);
}

小米轮播图子菜单另一种实现

• 用块元素实现的，使用了scss方法

1
2
3
4
5
6
7
8
9

————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章