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的更多相关文章

  1. IE6实现图片或背景的圆角效果

    使用ie-css3.htc实现背景圆角效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  2. 【实用技巧】去除BootStrap所有圆角效果

    满屏的圆角有没有审"美"疲劳啊?教你一键去除所有圆角效果: * { -webkit-border-radius: 0 !important; -moz-border-radius: ...

  3. 【代码笔记】iOS-给UIImageView加上圆角效果

    一,效果图. 二,代码. RootViewController.m #import "RootViewController.h" @interface RootViewContro ...

  4. CSS3实现圆角效果

    利用border-radius属性可以给元素div,input元素等添加圆角效果 后跟 值为这个圆角的半径,即数值越大效果越明显 -webkit-border-top/bottom-left/righ ...

  5. 个性二维码开源专题<液化/圆角/效果>

    基础方法: ChangeFillShape //修改填充形状 ChangeFillShape(...) // 摘要: // 修改填充形状 // // 参数: // g: // 图形画板 // // F ...

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

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

  7. iOS 高效添加圆角效果实战讲解

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  8. css3之圆角效果 border-radius

    圆角效果 border-radius  border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border ...

  9. Android图片圆角效果

    一般来说图片加圆角可以使用 Java 的方式来进行, 对图片略加处理即可, 但也可以使用纯XML+Nice-Patch图片来进行, 这样的速度会更快. 如果背景是纯色的情况下建议使用此方法. 原理则是 ...

随机推荐

  1. eclipse 注释模板

    位置:window -> Preferences -> java -> Code Style -> Code Templates <?xml version=" ...

  2. ASP.NET MVC中解决日志并发处理log4net

    本章主要内容是将异常信息写到队列中,然后通过线程写到文本文件中,速度非常快,没有阻塞和延迟加载 1.首先在Model中建一个类MyExceptionAttribute.cs public class ...

  3. python基础——面向对象编程

    python基础——面向对象编程 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的 ...

  4. iOS高效调试

    写代码难免出现bug. 储备些调试技能绝对能够提高你的工作效率,让bug无所遁形.下面就和大家分享一些我在工作中常用的iOS调试小技能. 1. 打印 最简单,基础的调试方法就是打印日志了.贴出两段封装 ...

  5. perl检查变量是否定义

    my $label = defined($pieces[0]) ? $pieces[0] : ""; my @alreadyAddedCol = $node1->{DB}-& ...

  6. 解决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 ...

  7. PAL/NTSC 制电视广播技术有关知识--FPGA

    1.PAL和NTSC的区别 常见的电视信号制式是PAL和NTSC,另外还有SECAM等. NTSC即正交平衡调幅制,PAL为逐行倒像正交平衡调幅制. (1)PAL电视标准  PAL电视标准,每秒25帧 ...

  8. orcad 元件库的查找位置对照表

    orcad元件库的查找: 如下:1.原理图常用库文件: MiscellaneousDevices.ddb: DallasMicroprocessor.ddb: IntelDatabooks.ddb: ...

  9. 《CLR via C#》读书笔记(5)基元类型、引用类型和值类型

    5.1 基元类型 编译器直接支持的数据类型称为基元类型(primitive type). 以下4行到吗生成完全相同的IL int a = 0; //最方便的语法 System.Int32 b = 0; ...

  10. HTTP 请求头中的 X-Forwarded-For

    https://imququ.com/post/x-forwarded-for-header-in-http.html