CSS3常用样式总结

Posted 2020-09-30

原地旋转	transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */
边框圆角	border-radius:25px;
添加阴影	box-shadow: h-shadow v-shadow blur spread color inset; 水平位置；垂直位置；模糊距离；阴影尺寸；阴影颜色；inset将外部阴影转化为内部阴影 前两个为必填
边框图片	-webkit-border-image: url(border.png) 30 30 round;/* Safari 5 and older */ -o-border-image: url(border.png) 30 30 round;/* Opera */ border-image: url(border.png) 30 30 round; round：平铺 stretch：拉伸填充
border边框	四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 　三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 　两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角 　一个值： 四个圆角值相同
背景图片	background-image: url(); /* 图片路径 */ background-position: right bottom, left top; /* 图片定位 */ background-repeat: no-repeat, repeat; /* 是否填充 */ background-size:80px 60px; /* 图片大小 */ background: url() right bottom no-repeat; /* 第二种写法 */
线性渐变	background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 ，默认上下渐变*/ background: linear-gradient(to bottom right, red , blue); /* 左上角到右下角 ， 自定义渐变*/ background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */ background: radial-gradient(red, green, blue); /* 从圆中心向外渐变　　*/
透明度	rgba(255,0,0,1)：前三个值为颜色取值；第四个值为透明大小  0—1
文本阴影	text-shadow: 5px 5px 5px #FF0000;
自动换行	word-wrap:break-word;
文本溢出	text-overflow: clip　|　ellipsis　; clip：超出剪切 ellipsis：超出用……代替
字体样式	font-family: "Times New Roman";/* 规定字体的名称 */ src: url();/* 字体文件的 URL */ font-weight:bold;/* 定义字体的粗细。默认是 "normal" */
li前面的小点	list-style: none; none不使用项目符号   disc实心圆，默认值   circle空心圆   square实心方块   decimal阿拉伯数字   lower-roman小写罗马数字   upper-roman大写罗马数字   lower-alpha小写英文字母   upper-alpha大写英文字母
a标签	text-decoration: none;/*去掉下划线样式*/ text-decoration:underline;/*下划线样式*/ text-decoration:line-through;/*删除线样式-贯穿线样式*/ text-decoration:overline;/*上划线样式*/ a{color:black} /*设置默认颜色*/ a:link {color:blue;} /*未访问颜色*/ a:visited {color:gray;} /*已访问颜色*/ a:hover {color:red;} /*悬浮（鼠标经过）时颜色*/ a:active {color:yellow;} /*点击时的颜色*/