css3圆角边框和边框阴影示例


Posted in HTML / CSS onMay 05, 2014

border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。

语法:

复制代码
代码如下:

border-radius: 1-4 length|% / 1-4 length|%;
-moz-border-radius:10px;支持旧的firefox
-webkit-border-radius:10px;支持chrome

按top-left, top-right, bottom-right, bottom-left顺序设置每个 radius 的值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

例子1:

复制代码
代码如下:

border-radius:2px;

等价于:

复制代码
代码如下:

border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;

例子2:

复制代码
代码如下:

border-radius:2em 1em 4em / 0.5em 3em;

等价于:

复制代码
代码如下:

border-top-left-radius:2em 0.5;
border-top-right-radius:1em 3em;
border-bottom-right-radius:4em 0.5em;
border-bottom-left-radius:1em 3em;

 
box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

语法:

复制代码
代码如下:

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

h-shadow,v-shadow必须。水平,垂直阴影的位置。允许赋值。blur可选,模糊距离。spread可选,阴影的尺寸。color可选,阴影的颜色。inset可选,将外部阴影(outset)改为内部阴影。

例子:

复制代码
代码如下:

box-shadow: inset 3px 3px 6px #ccc;
HTML / CSS 相关文章推荐
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 #HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 #HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 #HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 #HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 #HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 #HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 #HTML / CSS
You might like
关于手调机和数调机的选择
2021/03/02 无线电
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
C语言笔试题
2014/09/04 面试题
有个性的自我评价范文
2013/11/15 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
求职信范文英文版
2014/01/05 职场文书
大学社团活动策划书
2014/01/26 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
考试作弊检讨
2015/01/27 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
使用MybatisPlus打印sql语句
2022/04/22 SQL Server