如何查网站的百度快照,api网站模板,装修平台网站制作,工作室 网站建设Css3圆角讲解#xff1a;想必大家对于图片#xff0c;背景圆角#xff0c;都不陌生吧#xff0c;圆角语法#xff1a;border-radius#xff1a;圆角值#xff1b;CSS3圆角的优点传统的圆角生成方案#xff0c;必须使用多张图片作为背景图案。CSS3的出现#xff0c;使得…Css3圆角讲解想必大家对于图片背景圆角都不陌生吧圆角语法border-radius圆角值CSS3圆角的优点传统的圆角生成方案必须使用多张图片作为背景图案。CSS3的出现使得我们再也不必浪费时间去制作这些图片了而且还有其他多个优点* 减少维护的工作量。图片文件的生成、更新、编写网页代码这些工作都不再需要了。* 提高网页性能。由于不必再发出多余的HTTP请求网页的载入速度将变快。* 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等)背景图片会下载失败导致视觉效果不佳。CSS3就不会发生这种情况。这个值可以使用em exptpx百分比;Border-radius跟marginpadding差不多Border-radiuslefttoprighttoprightbottomleftbottom。复制代码代码如下:.box1{width:200px;height:100px;border-radius:30px 5px;background:#f66f17;margin-top:30px;}复制代码代码如下:.box2{width:200px;height:100px;border-radius:30px 20px 10px 0px;background:#f66f17;margin-top:30px;}对于圆角理解起来应该很简单。对于百分比目前最安全的做法就是将每个圆角边框的风格和宽度都设为一样的值并且避免使用百分比值。IE9以下是不支持此属性线性渐变background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色);Linear:渐变的类型(线性渐变)渐变的形式可选参数 有两种方式-1、设置旋转角度0度代表水平从左到右90度就是从上到下啦从0度开始逆时针变换。2、使用关键字left代表从左到右top代表从上到下同理right就是从右到左lefttop-从坐上到右下同理leftbottomrighttoprightbottom。中间颜色与中间颜色位置为可选参数。不过要考虑浏览器的兼容咱们这样写-webkit-gradient(linear,0 0,0 100%,from(起始颜色,to(结束颜色)) /*for Safari4,Chrome 2*/-webkit-linear-gradient(起始颜色, 结束颜色) /*for Safari 5.1,Chrome 10*/-moz-linear-gradient(起始颜色, 结束颜色) /*for firefox*/-o-linear-gradient(起始颜色, 结束颜色) /*Opera*/linear-gradient(起始颜色, 结束颜色) /*标准属性*/对于IE来说是个麻烦事老办法Filter:progid:DXImageTransform.Microsoft.gradient(startColorstr’ 起始颜色’,endColorstr” 结束颜色”); /*IE6,IE 7*/-ms-linear-gradient(起始颜色, 结束颜色) /*IE8*/复制代码代码如下:.content1{width:500px;height:300px;border-radius:10%;background:#ade691;background:-webkit-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:-moz-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#88cfc3, endColorstr#096e5d); /* IE6,IE7 */-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#88cfc3, endColorstr#096e5d);background:linear-gradient(lleft,#88cfc3,#329e8c 30%,#096e5d;float:left;}.tit1{font-size:3em;font-weight: bold;color:#f00;}重复性线性渐变repeating-linear-gradient属性来代替线性渐变linear-gradient复制代码代码如下:.content2{width:500px;height:200px;background-image: -webkit-repeating-linear-gradient(red,green 40px, orange 80px);background-image: repeating-linear-gradient(red,green 40px, orange 80px);}径向渐变radial-gradient(设置渐变的中心渐变形状 渐变大小起始颜色值中间颜色值 中间颜色位置终点颜色)渐变中心可选参数如30px 20px指距离左侧30px距离上侧20px可以是像素可以是百分比也可以是关键字默认为中心位置。渐变形状可选参数可以取值circle或eclipse【默认】渐变大小可循环参数可以取值closest-side指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side指定径向渐变的半径长度为从圆心到离圆心最远的边farthest-corner指定径向渐变的半径长度为从圆心到离圆心最远的角contain包含指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-sidecover覆盖指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-cornercircle farthest-corner圆形渐变ellipse farthest-corner椭圆渐变复制代码代码如下:.content3{width:500px;height:200px;background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));margin-top:20px;}
