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实现水平垂直居中效果的方法
Mar 10 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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
星际争霸秘籍
2020/03/04 星际争霸
杏林同学录(五)
2006/10/09 PHP
15种PHP Encoder的比较
2007/03/06 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php字符串分割函数用法实例
2015/03/17 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
原生JS实现小小的音乐播放器
2017/10/16 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
Node.js + express基本用法教程
2019/03/14 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
django 自定义过滤器的实现
2019/02/26 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
辞职信的写法
2015/02/27 职场文书
会计做账心得体会
2016/01/22 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript