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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 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
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
零基础php编程好学吗
2019/10/11 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
angular directive的简单使用总结
2017/05/24 Javascript
vue-loader教程介绍
2017/06/14 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
django如何连接已存在数据的数据库
2018/08/14 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Python2与Python3的区别点整理
2019/12/12 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
打造完美自荐信
2014/01/24 职场文书
绩效考核实施方案
2014/03/18 职场文书
党员志愿者活动方案
2014/08/28 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
小学生读书笔记
2015/07/01 职场文书