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;

css3圆角边框,边框阴影的更多相关文章

  1. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  2. css3神奇的圆角边框、阴影框及其图片边框

    css3圆角,建议IE10以上 如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状 如果border-radius 为50%,则为椭圆:当宽高一致时, ...

  3. css3新增边框、阴影、边框、背景、文本、字体

    css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...

  4. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  5. (一一九)通过CALayer实现阴影、圆角、边框和3D变换

    在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果. [阴影和圆 ...

  6. css3圆角边框

    圆角边框 一.border-radius属性简介   为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...

  7. CSS(五)- 背景与边框 - 边框圆角与阴影基础用法

    扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...

  8. 第50天学习打卡(CSS 圆角边框 盒子阴影 定位)

    4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta char ...

  9. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  10. CSS3入门之边框与背景

    CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...

随机推荐

  1. LeetCode 107. Binary Tree Level Order Traversal II

    Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...

  2. 使用jaxp对比xml进行SAX解析

    package cn.itcast.sax; import java.io.IOException; import javax.xml.parsers.ParserConfigurationExcep ...

  3. (转)C#使用Mysql记录

    (1)首先需要下载C#访问MySQL数据库的ADO.NET驱动程序 http://dev.mysql.com/downloads/connector/ 我下载的版本为: mysql-connector ...

  4. 通过srvctl add命令添加database信息到srvctl管理器-转

    这是我在实际中遇到的一个问题,rac+dg架构将备库切为主库,srvctl管理器中没有database信息. 对于dbca创建的数据库,srvctl中包含了数据库和实例的信息.但是对于备份恢复的RAC ...

  5. jQuery基础---filter()和find()

    这是jQuery里常用的2个方法.他们2者功能是完全不同的,而初学者往往会被误导. 首先 我们看.find()方法:现在有一个页面,里面HTML代码为;程序代码 <div class=" ...

  6. OpenGL的学习与认识

    OpenGL: Open Graphics Library 一套三维图形处理库,也是该领域的工业标准.是一个定义了一个跨编程语言,跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可) ...

  7. H264 Profile

    H.264有四种profile,对应四种H264画质级别.每个profile支持一组特定的编码功能,并支持一类特定的应用,分别是BP.EP.MP.HP: 1. BP-Baseline Profile ...

  8. java中高级软件工程师面试总结

    最近去了几家公司面试java中高级工程师,打击挺大的,感觉自己一直以来没有很好的深入学习,对各种知识都是一知半解,但心又太高,想找更高薪的职位,结果面试屡屡碰壁,哎,心情好低落,也是时候静下心来,好好 ...

  9. 举例说明划分子网,路由器IP地址

    划分子网的方法是从网络的主机号借用若干位作为子网号,主机号相应地减少了同样的位数.在划分子网前,IP地址是两级结构的:网络号,主机号. 划分子网后,两级IP地址在本单位内部就变为三级IP地址:网络号, ...

  10. 简单几步优化技巧令你的Windows7系统加速

    就算有再高的硬件配置,系统用久了还是会变慢,xp如此,win7同样是如此.其实系统用的如何完全在于个人使用习惯,只要掌握了以下三种方法,就可以让你的win7运行速度大大提升. 1.修改启动项程序 在你 ...