CSS3中border-radius、box-shadow与gradient那点事儿

一、border-radius

border-radius用于添加圆角边框,用处非常广泛。

1)一个值,代表了四个角

.radius-one {/* Safari 3-4, iOS 1-3.2, Android 1.6- */-webkit-border-radius: 12px; /* Firefox 1-3.6 */-moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */border-radius: 12px; 
}

2)三个值,中间的值代表右上和左下

.radius-three {/* top left, top right|bottom left, bottom right */border-radius: 5px 20px 5px;
}

 

3)斜杠设置第二组值

“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循TRBL(上右下左)的顺序原则。左上角是10px/40px,右上角是20px/30px,以此类推。

.radius-five {border-radius: 10px 20px 30px 40px/40px 30px 20px 10px; /* horizontal radius / vertical radius */
}

4)背景图将被裁剪

.radius-img {background: url(img.jpg) no-repeat right bottom;border-radius: 12px;
}

 

二、box-shadow

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

box-shadow: h-shadow v-shadow blur spread color inset;

偏移方向如下图所示:

1)单层阴影

.box-shadow {/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */-webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */-moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */box-shadow:         3px 3px 5px 6px #ccc;  
}

2)多重阴影

黑色:带模糊和阴影尺寸

紫色与黄色:只有水平和垂直

红色与蓝色:水平、垂直以及模糊

.box-shadow-more {box-shadow: 0 0 10px 5px black, 40px -30px purple, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}

三、CSS3 Gradient

1)linear-gradient(线性渐变)

在创建渐变的过程中,可以指定多个中间颜色值,这个值称为色标。每个色标包含一种颜色和一个位置,浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变。

PhotoShop中的渐变编辑器如下所示:

 

CSS兼容性如下

 

各个浏览器语法如下:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

 下面是一个实例,与上面的语法一一对应,顺序也是一样的:

.linear-gradient {background: -moz-linear-gradient(top,  rgba(255,203,72,1) 0%, rgba(255,156,35,1) 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(50%,rgba(255,156,35,1)));background: -webkit-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
background: -o-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffcb48, endColorstr=#ff9c23)";

  background: linear-gradient(to bottom, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
}

标准语法对于方向需要使用一个to,而且写的方向要与其它的相反,如果是top,这里就是bottom

第二个颜色我用了个50%,开始渐变的起始位置

 

还可以设置角度,它是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变。

-filter-ms-filter-webkit-gradient就不能用啦。

.linear-gradient-angle {background: -moz-linear-gradient(45deg,  rgba(255,203,72,1) 0%, rgba(255,156,35,1) 50%);background: -webkit-linear-gradient(45deg,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);background: -o-linear-gradient(45deg,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);background: linear-gradient(45deg,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
}

 

2)radial-gradient(径向渐变)

CSS兼容性与上面的线性渐变类似。

各个浏览器语法如下:

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-o-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

下面是一个实例,与上面的语法一一对应:

.radial-gradient {background: -moz-radial-gradient(10px 20px, #f00, #ff0 40%, #080);background: -webkit-radial-gradient(10px 20px, #f00, #ff0 40%, #080);background: -o-radial-gradient(10px 20px, #f00, #ff0 40%, #080);background: radial-gradient(at 10px 20px, #f00, #ff0 40%, #080);
}

标准语法对于坐标需要使用一个at;

第二个颜色我用了个40%,开始渐变的起始位置

 

demo下载:

http://download.csdn.net/detail/loneleaf1/9146297

 

参考资料:

https://css-tricks.com/almanac/properties/b/border-radius/   css-tricks border-radius

http://www.cnblogs.com/mofish/p/3832136.html   从css3书写顺序引出来的border-radius参数

https://css-tricks.com/almanac/properties/b/box-shadow/    css-tricks border-shadow

http://www.basecss.net/article/box-shadow.html   [译]Box-shadow, CSS3最好的特性之一

http://www.webhek.com/css-box-shadow-property    CSS阴影效果(Box-shadow)用法趣味讲解

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html   CSS3 线性渐变(linear-gradient)

http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html   CSS3 径向渐变(radial-gradient)

http://www.w3cplus.com/css3/new-css3-linear-gradient.html   再说CSS3渐变——线性渐变

http://blog.csdn.net/playboyanta123/article/details/9303857    radial-gradient CSS3的蛋疼的径向渐变

转载于:https://www.cnblogs.com/strick/p/4843595.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/258263.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

编程 跳台阶_Java版剑指offer编程题第8题--跳台阶

跟learnjiawa一起每天一道算法编程题&#xff0c;既可以增强对常用API的熟悉能力&#xff0c;也能增强自己的编程能力和解决问题的能力。算法和数据结构&#xff0c;是基础中的基础&#xff0c;更是笔试的重中之重。不积硅步&#xff0c;无以至千里&#xff1b;不积小流&#x…

获取汉字的首字母(转)

转换 获取一个汉字的拼音首字母。 GB码两个字节分别减去160&#xff0c;转换成10进制码组合就可以得到区位码例如汉字“你”的GB码是0xC4/0xE3&#xff0c;分别减去0xA0&#xf…

$ionicPopup

转自&#xff1a;http://www.ionicframework.com/docs/api/service/%24ionicPopup/ Usage A few basic examples, see below for details about all of the options available. angular.module(mySuperApp, [ionic]) .controller(PopupCtrl,function($scope, $ionicPopup, $tim…

目标规划运筹学例题doc_运筹学之目标规划(胡运权版).doc

运筹学之目标规划(胡运权版).doc第七章 目标规划1 目标规划的提出线性规划问题是讨论一个给定的线性目标函数在一组线性约束条件下的最大值或最小值问题。对于一个实际问题&#xff0c;管理科学者根据管理层决策目标的要求&#xff0c;首先确定一个目标函数以衡量不同决策的优劣…

Deep Learning(深度学习) 学习笔记(四)

神经概率语言模型&#xff0c;内容分为三块&#xff1a;问题&#xff0c;模型与准则&#xff0c;实验结果。[此节内容未完待续...] 1&#xff0c;语言模型问题 语言模型问题就是给定一个语言词典包括v个单词&#xff0c;对一个字串做出二元推断&#xff0c;推断其是否符合该语言…

Java Virtual Machine

后续完善转载于:https://www.cnblogs.com/fight-tao/p/4849167.html

selenium 鼠标悬浮_处理Selenium3+python3定位鼠标悬停才显示的元素

先给大家介绍下Selenium3python3--如何定位鼠标悬停才显示的元素定位鼠标悬停才显示的元素&#xff0c;要引入新模块# coding:utf-8from selenium import webdriverfrom selenium.webdriver.common.action_chains import ActionChainsdriver webdriver.Firefox()driver.get(&q…

JavaScript 运行机制

JavaScript 运行机制 阅读目录 一、为什么JavaScript是单线程&#xff1f;二、任务队列三、事件和回调函数四、Event Loop五、定时器六、Node.js的Event Loop七、关于setTimeout的测试一、为什么JavaScript是单线程&#xff1f; JavaScript语言是单线程&#xff0c;也就是说&am…

mysql 时间 本周 本月_mysql查询当天、本周、上周、本月、上月信息

今天select * from 表名 where to_days(时间字段名) to_days(now());昨天SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ) – TO_DAYS( 时间字段名) < 17天SELECT * FROM 表名 where DATE_SUB(CURDATE(), INTERVAL 7 DAY) < date(时间字段名)近30天SELECT * FROM 表名 wher…

android自定义倒计时控件示例

这篇文章主要介绍了Android秒杀倒计时自定义TextView示例&#xff0c;大家参考使用吧 自定义TextView控件TimeTextView代码&#xff1a; 复制代码 代码如下:import android.content.Context;import android.content.res.TypedArray;import android.graphics.Paint;import andro…

Spring Cloud构建微服务架构:服务消费(Ribbon)【Dalston版】

通过上一篇《Spring Cloud构建微服务架构&#xff1a;服务消费&#xff08;基础&#xff09;》&#xff0c;我们已经学会如何通过LoadBalancerClient接口来获取某个服务的具体实例&#xff0c;并根据实例信息来发起服务接口消费请求。但是这样的做法需要我们手工的去编写服务选…

检测是否点击到精灵

需要给每个精灵设置tag.可以用枚举 bool GE::GamePass::ccTouchBegan( cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent ) { const int iButtonCount 2; const int iButtonTags[iButtonCount] { GamePass_btn_share, GamePass_btn_return }; for(int i 0; i < iButt…

从gitlab上拉代码_从gitlab上拉取代码并一键部署

一、gitlab安装GitLab是一个利用Ruby on Rails开发的开源应用程序&#xff0c;实现一个自托管的Git项目仓库&#xff0c;可通过Web界面进行访问公开的或者私人项目。GitLab拥有与Github类似的功能&#xff0c;能够浏览源代码&#xff0c;管理缺陷和注释。可以管理团队对仓库的访…

LPWA技术:发展物联网的最佳选择

物联网时代的物物相连将会使百亿以上物体连入网络&#xff0c;这对传统上的两种通信技术&#xff0c;即近距离无线接入和移动蜂窝网提出了更高的要求。事实上&#xff0c;目前&#xff0c;用于物联网发展的通信技术正在全球范围内开发&#xff0c;低功耗广域网通信技术(Low Pow…

上传文件大小限制,webconfig和IIS配置大文件上传

IIS6下上传大文件没有问题&#xff0c;但是迁移到IIS7下面&#xff0c;上传大文件时&#xff0c;出现HTTP 404错误。 IIS配置上传大小&#xff0c;webconfig <!-- 配置允许上传大小 --><httpRuntime maxRequestLength"1997151" useFullyQualifiedRedirectU…

产品管理流程

转载于:https://www.cnblogs.com/candle806/p/4860841.html

如何根据灰度直方图计算标准差_如何根据电器功率计算电线的粗细?

一般来说&#xff0c;测算电线的粗细&#xff0c;需要根据功率计算电流&#xff0c;根据电流选择导线截面&#xff0c;根据导线的截面&#xff0c;导线或电缆的型号查厂家的该型号的导线电缆的直径。这里就涉及了&#xff1a;电线粗细与功率之间的关系计算&#xff1b;导线截面…

解惑烟草行业工控系统如何风险评估

上周五下午&#xff0c;威努特工控安全联合创始人 赵宇 先生&#xff0c;带来了一场关于“工控系统的风险评估”的技术讲座。此次近200注册报名的朋友&#xff0c;来自各大高校、国企、外企、测评中心、安全厂商、大型集成商以及大型IT科技企业、安全实验室等。 烟草企业调研参…

ORACLE union order by

select * from ( select a.id,a.oacode,a.custid,a.custname,a.xsz,a.salename,a.communicationtheme,a.communicationproperty,a.communicationtime,a.productmanager,a.creator,a.createdate from technology_flow a where a.oastate正常结束 union select b.id,b.oacode,b…

UVa 11806 Cheerleaders

题意&#xff1a;m行n列的矩形网格放k个相同的石子&#xff0c;要求第一行最后一行第一列最后一列都必须有石子&#xff0c;问有多少种放法 A为第一行没有石子的方案数&#xff0c;BCD依此类推&#xff0c;全集为S 如果没有任何要求的话&#xff0c;放法数应该是C(rc, k) 解法中…