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 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
Html5调用企业微信的实现
Apr 16 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
Snoopy类使用小例子
2008/04/15 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python实现Restful API的例子
2019/08/31 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
求职简历自荐信
2013/10/20 职场文书
追悼会上的答谢词
2014/01/10 职场文书
小学教师事迹材料
2014/01/13 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
关于幸福的感言
2015/08/03 职场文书
机械生产实习心得体会
2016/01/22 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript