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图片来进行, 这样的速度会更快. 如果背景是纯色的情况下建议使用此方法. 原理则是 ...
随机推荐
- eclipse 注释模板
位置:window -> Preferences -> java -> Code Style -> Code Templates <?xml version=" ...
- ASP.NET MVC中解决日志并发处理log4net
本章主要内容是将异常信息写到队列中,然后通过线程写到文本文件中,速度非常快,没有阻塞和延迟加载 1.首先在Model中建一个类MyExceptionAttribute.cs public class ...
- python基础——面向对象编程
python基础——面向对象编程 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的 ...
- iOS高效调试
写代码难免出现bug. 储备些调试技能绝对能够提高你的工作效率,让bug无所遁形.下面就和大家分享一些我在工作中常用的iOS调试小技能. 1. 打印 最简单,基础的调试方法就是打印日志了.贴出两段封装 ...
- perl检查变量是否定义
my $label = defined($pieces[0]) ? $pieces[0] : ""; my @alreadyAddedCol = $node1->{DB}-& ...
- 解决git客户端MINGW32下的“Could not open a connection to your authentication agent.”
使用git, 下载客户端后想进行和github 进行ssh 互通 出现以下情况: hadoop@deng-PC MINGW32 ~/.ssh$ ssh-add ~/.ssh/id_rsaCould n ...
- PAL/NTSC 制电视广播技术有关知识--FPGA
1.PAL和NTSC的区别 常见的电视信号制式是PAL和NTSC,另外还有SECAM等. NTSC即正交平衡调幅制,PAL为逐行倒像正交平衡调幅制. (1)PAL电视标准 PAL电视标准,每秒25帧 ...
- orcad 元件库的查找位置对照表
orcad元件库的查找: 如下:1.原理图常用库文件: MiscellaneousDevices.ddb: DallasMicroprocessor.ddb: IntelDatabooks.ddb: ...
- 《CLR via C#》读书笔记(5)基元类型、引用类型和值类型
5.1 基元类型 编译器直接支持的数据类型称为基元类型(primitive type). 以下4行到吗生成完全相同的IL int a = 0; //最方便的语法 System.Int32 b = 0; ...
- HTTP 请求头中的 X-Forwarded-For
https://imququ.com/post/x-forwarded-for-header-in-http.html