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美化表单控件全集
Jun 29 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 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
ThinkPHP之getField详解
2014/06/20 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
js变量提升深入理解
2016/09/16 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python常用内置函数总结
2015/02/08 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
法律专业自荐信
2014/06/03 职场文书
大学运动会通讯稿
2015/07/18 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL