首页 > 代码库 > css3
css3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .test{ width: 100px; height: 100px; background: #000; border-radius: 20px; /*圆角*/ /*box-shadow: x y z t c;*/ /*(x为阴影水平便宜量,y为垂直偏移量, z为阴影模糊程度,越大边缘越模糊, t为阴影的半径大小。 c为阴影的颜色)*/ } .text{ text-shadow:1px 1px 5px #666; /*text-shadow: X-Offset Y-Offset Blur Color*/ /*x为水平偏移量,y为垂直偏移量,B为阴影模糊程度,值越大越模糊。 C为阴影模糊颜色*/ } .Gradients{ width: 200px; height: 200px; /*background: linear-gradient(direction, color-stop1, color-stop2, ...);*/ /*线性渐变,第一个参数为方向,第二的参数和第三个参数为起始和结束的颜色*/ background: -webkit-linear-gradient(left,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(left,red, blue); /* 标准的语法 */ /*transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-40deg,0deg);// 旋转,缩放,定位,倾斜*/ /*scale(x,y) 缩放,x为x轴缩放,y为y轴缩放, 只指定一个为等比例缩放*/ /*translate(x ,y)*/ /*translate(x,y) 缩放,x为x轴变动,y为y轴变动, */ /*skew(x,y)*/ /*倾斜变幻。*/ } .Gradients:hover{ transform: rotate(40deg); transform-origin:left top;//改变基点位置,默认是center,center } </style></head><body> <div class="test"></div> <p class="text">啥地方接口的酸辣粉</p> <div class="Gradients"></div></body></html>
css3
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。