css3圆角边框,边框阴影
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圆角边框,边框阴影的更多相关文章
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css3神奇的圆角边框、阴影框及其图片边框
css3圆角,建议IE10以上 如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状 如果border-radius 为50%,则为椭圆:当宽高一致时, ...
- css3新增边框、阴影、边框、背景、文本、字体
css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- (一一九)通过CALayer实现阴影、圆角、边框和3D变换
在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果. [阴影和圆 ...
- css3圆角边框
圆角边框 一.border-radius属性简介 为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...
- CSS(五)- 背景与边框 - 边框圆角与阴影基础用法
扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...
- 第50天学习打卡(CSS 圆角边框 盒子阴影 定位)
4.4圆角边框 圆角边框: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- CSS3入门之边框与背景
CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...
随机推荐
- [DataTable]C# datatable取最大值最小值
ArrayList al = new ArrayList(); DataTable dt = new DataTable(); dt.Columns.Add("A",typeof( ...
- (easy)LeetCode 228.Summary Ranges
Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...
- HttpClient + ASP.NET Web API, WCF之外的另一个选择
WCF的野心造成了它的庞大复杂,HTTP的单纯造就了它的简单优美.为了实现分布式Web应用,我们不得不将两者凑合在一起 —— WCF服务以HTTP绑定宿主于IIS. 于是有了让人晕头转向的配置.让人郁 ...
- 初学cocos2dx-3.x之使用Scale9Sprite时的配置问题
今天学习的时候遇到了Scale9Sprite————一张可拉伸的精灵,只要给它设置一下大小,它就会自动拉伸. Scale9Sprite* nineGirl = Scale9Sprite::create ...
- 业务gis 搭建一个skyline 的js模板 (一)
刚刚我们说的是二维的系统,如果要展示三维,我们是不是也需要这样,答案是必须的,是一定要,如果你是基于skyline做三维开发,业务开发人员要去搞那套api估计要吐血,所以我们必须得封装起来,这里不介绍 ...
- int型的数到底最大值是多少?
本文摘自:http://blog.csdn.net/friendbaby/article/details/6822690 刚才在百度知道上看见一个网友问int型的数最大能存多少.这个问题其实计算机系统 ...
- hadoop2.5.1搭建(二)
第一篇主要是整体的步骤,其实中间遇到很多问题,第二篇将遇到的问题全部列举下来: 1.1包不能加载警告 WARN util.NativeCodeLoader: Unable to load native ...
- .NET的三种缓存(页面缓存,控件缓存,自定义缓存)
BLL.Area bll = new BLL.Area(); protected void Page_Load(object sender, EventArgs e) { if (Cache[&quo ...
- 在集群环境中使用 EhCache 缓存系统|RMI 集群模式
RMI 是 Java 的一种远程方法调用技术,是一种点对点的基于 Java 对象的通讯方式.EhCache 从 1.2 版本开始就支持 RMI 方式的缓存集群.在集群环境中 EhCache 所有缓存对 ...
- Leetcode026. Remove Duplicates from Sorted Array
water class Solution { public: int removeDuplicates(vector<int>& nums) { for(vector<int ...