CSS3_实现圆角效果box-shadow
1.outline的直角与圆角
来给个div:
<div class="use-outline"></div>
来再给个样式:
.use-outline{ width: 200px;
height: 200px;
background: #009dda;
margin: 100px 40px;
border-radius: 10px;
border: 10px solid #c24263; outline: 20px solid #26C2A7;
-moz-outline-radius: 30px; }
看一下效果图:
-moz-outline-radius: 30px;属性使得绿色的 outline 成圆角。但是这个属性只能在FireFox浏览器中使用。切 !!!!这还怎么玩。。所以不用它了 接下来换一个,box-shadow(盒阴影)
1.outline的直角与圆角
给个样式:
.use-outline{
width: 200px;
height: 200px;
background: #009dda;
margin: 100px 40px;
border: 10px solid #c24263;
border-radius: 10px; box-shadow:0px 0px 0px 25px #c032cc;
}
看一下效果图:
]
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow中的6个参数分别为:
h-shadow:水平阴影的位置,可为负值;
v-shadow:垂直阴影的位置,可为负值;
blur:可选。模糊距;
spread:可选。阴影的尺寸;
color:可选。阴影的颜色;
inset:可选。将外部阴影 (outset) 改为内部阴影; 兼容性处理:
filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值), Strength=阴影半径(数值))
这是理论,下面给你个例子:
#sean_msg{
filter: progid:DXImageTransform.Microsoft.Shado(Strength=3, Direction=135, Color='#999999');
上面是IE的样式代码
-webkit-box-shadow:2px 2px 3px #aaa; -------这是兼容谷歌浏览器
-moz-box-shadow:2px 2px 3px #aaa; --------这是兼容火狐浏览器
background:#fff; }
CSS3_实现圆角效果box-shadow的更多相关文章
- IE6实现图片或背景的圆角效果
使用ie-css3.htc实现背景圆角效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- 【实用技巧】去除BootStrap所有圆角效果
满屏的圆角有没有审"美"疲劳啊?教你一键去除所有圆角效果: * { -webkit-border-radius: 0 !important; -moz-border-radius: ...
- 【代码笔记】iOS-给UIImageView加上圆角效果
一,效果图. 二,代码. RootViewController.m #import "RootViewController.h" @interface RootViewContro ...
- CSS3实现圆角效果
利用border-radius属性可以给元素div,input元素等添加圆角效果 后跟 值为这个圆角的半径,即数值越大效果越明显 -webkit-border-top/bottom-left/righ ...
- 个性二维码开源专题<液化/圆角/效果>
基础方法: ChangeFillShape //修改填充形状 ChangeFillShape(...) // 摘要: // 修改填充形状 // // 参数: // g: // 图形画板 // // F ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- iOS 高效添加圆角效果实战讲解
圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...
- css3之圆角效果 border-radius
圆角效果 border-radius border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border ...
- Android图片圆角效果
一般来说图片加圆角可以使用 Java 的方式来进行, 对图片略加处理即可, 但也可以使用纯XML+Nice-Patch图片来进行, 这样的速度会更快. 如果背景是纯色的情况下建议使用此方法. 原理则是 ...
随机推荐
- (keymap设置及eclipse常用快捷键总结)
设置pycharm为Eclipse快捷键后使用总结: Ctrl + O 根据name模糊查找当前文件中类.方法 Alt + (向左箭头或者向右箭头) ,回退or前进到到之前查看或者编辑处 Alt + ...
- Effective C++ -----条款27:尽量少做转型动作
如果可以,尽量避免转型,特别是在注重效率的代码中避免dynamic_casts.如果有个设计需要转型动作,试着发展无需转型的替代设计. 如果转型是必要的,试着将它隐藏于某个函数背后.客户随后可以调用该 ...
- Divide and conquer:Dropping tests(POJ 2976)
最大化平均值 题目大意:给定你n个分数,从中找出k个数,使∑a/∑b的最大值 这一题同样的也可以用二分法来做(用DP会超时,可见二分法是多么的实用呵!),大体上是这样子:假设最大的平均值是w,那么题目 ...
- 【leetcode】 Palindrome Partitioniong (middle) (*^__^*)
Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...
- IOS-多线程技术
三种: •NSThread: –优点:NSThread 比其他两个轻量级,使用简单 –缺点:需要自己管理线程的生命周期.线程同步.加锁.睡眠以及唤醒等.线程同步对数据的加锁会有一定的系统开销 •NSO ...
- GridView如何合并同类项
/// <summary> /// 合并GridView中某列相同信息的行(单元格) /// </summary> /// <param name ...
- JDBC题库
一. 填空题 JDBC ,是一种用于执行SQL语句的Java API,为多种关系数据库提供统一访问.它由一组用Java语言编写的类和接口组成. JDBC API:供程序员调用的接口与类,集 ...
- C++联合
原文地址:http://ideage.javaeye.com/blog/210614 联合(union)在C/C++里面见得并不多,但是在一些对内存要求特别严格的地方,联合又是频繁出现,那么究竟什么是 ...
- NYOJ之Fibonacci数
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAJwCAIAAAD0kmsHAAAgAElEQVR4nO3dvXLbOMM24O8k3PtA3E
- Java中length,length(),size()区别
length属性:用于获取数组长度. eg: int ar[] = new int{1,2,3} /** * 数组用length属性取得长度 */ int lenAr = ar.length;//此处 ...