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. (keymap设置及eclipse常用快捷键总结)

    设置pycharm为Eclipse快捷键后使用总结: Ctrl + O  根据name模糊查找当前文件中类.方法 Alt + (向左箭头或者向右箭头) ,回退or前进到到之前查看或者编辑处 Alt + ...

  2. Effective C++ -----条款27:尽量少做转型动作

    如果可以,尽量避免转型,特别是在注重效率的代码中避免dynamic_casts.如果有个设计需要转型动作,试着发展无需转型的替代设计. 如果转型是必要的,试着将它隐藏于某个函数背后.客户随后可以调用该 ...

  3. Divide and conquer:Dropping tests(POJ 2976)

    最大化平均值 题目大意:给定你n个分数,从中找出k个数,使∑a/∑b的最大值 这一题同样的也可以用二分法来做(用DP会超时,可见二分法是多么的实用呵!),大体上是这样子:假设最大的平均值是w,那么题目 ...

  4. 【leetcode】 Palindrome Partitioniong (middle) (*^__^*)

    Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...

  5. IOS-多线程技术

    三种: •NSThread: –优点:NSThread 比其他两个轻量级,使用简单 –缺点:需要自己管理线程的生命周期.线程同步.加锁.睡眠以及唤醒等.线程同步对数据的加锁会有一定的系统开销 •NSO ...

  6. GridView如何合并同类项

    /// <summary>     /// 合并GridView中某列相同信息的行(单元格)     /// </summary>     /// <param name ...

  7. JDBC题库

    一.    填空题 JDBC    ,是一种用于执行SQL语句的Java API,为多种关系数据库提供统一访问.它由一组用Java语言编写的类和接口组成. JDBC API:供程序员调用的接口与类,集 ...

  8. C++联合

    原文地址:http://ideage.javaeye.com/blog/210614 联合(union)在C/C++里面见得并不多,但是在一些对内存要求特别严格的地方,联合又是频繁出现,那么究竟什么是 ...

  9. NYOJ之Fibonacci数

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAJwCAIAAAD0kmsHAAAgAElEQVR4nO3dvXLbOMM24O8k3PtA3E

  10. Java中length,length(),size()区别

    length属性:用于获取数组长度. eg: int ar[] = new int{1,2,3} /** * 数组用length属性取得长度 */ int lenAr = ar.length;//此处 ...