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 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
html粘性页脚的具体使用
Jan 18 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弹出错误警告函数扩展性强
2014/01/17 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
初学JavaScript第二章
2008/09/30 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python实现扫描日志关键字的示例
2018/04/28 Python
Python单元测试简单示例
2018/07/03 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
房地产财务管理制度
2014/02/02 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
会议欢迎词
2015/01/23 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
golang的文件创建及读写操作
2022/04/14 Golang
Python采集壁纸并实现炫轮播
2022/04/30 Python
服务器SVN搭建图文安装过程
2022/06/21 Servers