CSS3圆角和渐变2种常用功能详解


Posted in HTML / CSS onJanuary 06, 2016

Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧,
圆角语法:border-radius:圆角值;
CSS3圆角的优点
传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:

* 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。

* 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。

* 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。
这个值可以使用:em ,ex,pt,px,百分比;
Border-radius跟margin,padding差不多
Border-radius:lefttop,righttop,rightbottom,leftbottom。

复制代码
代码如下:

<div class="box1">
</div>
.box1{width:200px;height:100px;border-radius:30px 5px;background:#f66f17;margin-top:30px;}

CSS3圆角和渐变2种常用功能详解

复制代码
代码如下:

<div class="box2"></div>
.box2{width:200px;height:100px;border-radius:30px 20px 10px 0px;background:#f66f17;margin-top:30px;}

CSS3圆角和渐变2种常用功能详解

对于圆角理解起来应该,很简单。
对于百分比:目前最安全的做法,就是将每个圆角边框的风格和宽度,都设为一样的值,并且避免使用百分比值。
IE9以下是不支持此属性
线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色);
Linear:渐变的类型(线性渐变);
渐变的形式:可选参数 有两种方式-1、设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换。
2、使用关键字,left代表从左到右,top代表从上到下,同理right就是从右到左,lefttop-从坐上到右下,同理leftbottom,righttop,rightbottom。
中间颜色与中间颜色位置为可选参数。
不过要考虑浏览器的兼容,咱们这样写:
-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*/

复制代码
代码如下:

<div class="content1"></div>
.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;}

CSS3圆角和渐变2种常用功能详解

重复性线性渐变:repeating-linear-gradient属性来代替线性渐变linear-gradient;

复制代码
代码如下:

<div class="content2"></div>
.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);}

CSS3圆角和渐变2种常用功能详解

径向渐变:radial-gradient(设置渐变的中心,渐变形状 渐变大小,起始颜色值,中间颜色值 中间颜色位置,终点颜色)
渐变中心,可选参数,如30px 20px指距离左侧30px距离上侧20px,可以是像素,可以是百分比,也可以是关键字,默认为中心位置。
渐变形状,可选参数,可以取值circle或eclipse【默认】
渐变大小,可循环参数,可以取值
closest-side:
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner:
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner:
指定径向渐变的半径长度为从圆心到离圆心最远的角
contain:
包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover:
覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner
circle farthest-corner圆形渐变,ellipse farthest-corner椭圆渐变

复制代码
代码如下:

<div class="content3"></div>
.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;}

CSS3圆角和渐变2种常用功能详解

HTML / CSS 相关文章推荐
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 #HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 #HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 #HTML / CSS
CSS3 display知识详解
Nov 25 #HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 #HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 #HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 #HTML / CSS
You might like
PHP实现linux命令tail -f
2016/02/22 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
微信小程序实现滚动消息通知
2018/02/02 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
详解小白之KMP算法及python实现
2019/04/04 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
小学生安全保证书
2014/02/01 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL