博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css3常用属性
阅读量:7005 次
发布时间:2019-06-27

本文共 936 字,大约阅读时间需要 3 分钟。

颜色模式

rgba(0,0,0,0.5) a代表alpha半透明通道但凡是用到颜色的地方,都可以使用rgba颜色模式。 包括文字颜色,背景色,边框色。opacity:0.1; 这个和rgba的差别在它会把内容的透明度改变

圆角

border-radius    圆角的半径它可以设置多个值。多个值的用法和margin类似。 box-shadow: 水平偏移  垂直偏移  羽化   投影大小   颜色  inset(内投影)内投影是可选的,注意没有outset。盒子投影可设置多组值,用逗号隔开。

盒子投影

box-shadow: 水平偏移  垂直偏移  羽化   投影大小   颜色  inset(内投影)内投影是可选的,注意没有outset。PS : 盒子投影可设置多组值,用逗号隔开。

文字投影

text-shadow: 水平偏移  垂直偏移  羽化   颜色  比盒子投影少了投影大小和内投影,其他用法跟盒子投影一样。盒子投影和边框如果没设置颜色,默认会和文字的颜色相同(currentColor)。

背景图固定

background-attachment: fixed;scroll: 随着页面的滚动轴背景图片将移动fixed: 随着页面的滚动轴背景图片不会移动效果:盒子滚动,但背景图是不动的,类似盒子固定定位。

背景图尺寸

background-size取值:固定值(px): 100px  200px;百分比(%):  50%  ;      百分比是基于当前盒子的宽和度特殊值:(出现特殊值的都不会变形)auto          自动,正比例缩放。cover         把图片填满整个盒子 (较常用)contain  把图片完整显示,但是可能出现留白 background:url("../images/dd.png") no-repeat  left/contain;后面的/contain等同于background-size:contain;

模糊背景

filter: blur(3px); 和opacity类似会把内容给模糊掉

转载于:https://www.cnblogs.com/Model-Zachary/p/6141604.html

你可能感兴趣的文章