*首先要清楚的是，box-shadow的形状会随着border-radius变化。下面的例子可以证明：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            width: 200px;

            height: 200px;

            border-radius: 20px;

            background: #f00;

            margin: 100px;

            outline: 10px solid #00f;

        }

        .div3{

            outline: none;

            box-shadow: 0 0 0 10px green;

        }

    </style>

</head>

<body>

    <div class="div3"></div>

</body>

</html>

效果：

*而实现内圆角边框（外边框为直角）就可利用以上特性（box-shaodw填充outline和border之间的空白），代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            width: 200px;

            height: 200px;

            border-radius: 20px;

            background: #f00;

            margin: 100px;

            outline: 10px solid #00f;

        }

        .div1{

            box-shadow: 0 0 0 10px #ff0;

        }

        .div2{

            box-shadow: 0 0 0 10px #00f;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="div2"></div>

</body>

</html>

div1 效果：

div2效果：

喜欢请推荐，转载请标明出处。

CSS3利用一个div实现内圆角边框效果的更多相关文章

  1. [css]《css揭秘》学习（四）-一个元素实现内圆角边框

    如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...

  2. css3实现一个div设置多张背景图片及background-image属性

    CSS3/CSS1 background-image 属性 语法: background-image:<bg-image> [ , <bg-image> ]* <bg-i ...

  3. 向 div 元素添加圆角边框：

    div { border:2px solid; border-radius:25px; }

  4. CSS3 阴影与圆角边框

    ㈠css3的新特性实际应用 ⑴文本阴影效果,用代码编写的方式实现   ⑵鼠标悬停的动态效果 左侧三幅图片,上面初始状态是没有说明文本的,但把鼠标放在上面的时候,这个图片上面就出现了说明文字   ⑶分栏 ...

  5. css3如何实现圆角边框

    圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...

  6. CSS3实现多样的边框效果

    半透明边框 实现效果: 实现代码: <div> 你能看到半透明的边框吗? </div> div { /* 关键代码 */ border: 10px solid rgba(255 ...

  7. 50个Android开发技巧(12 为控件加入圆角边框)

    控件的圆角边框能够使你的App看起来更美观,事实上实现起来也非常easy. (原文地址:http://blog.csdn.net/vector_yi/article/details/24463025) ...

  8. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  9. CSS3_边框 border 详解_一个 div 的阴阳图

    (面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框 足够大     3. 需要的三角形的部分, border-top-color 设置为 ...

随机推荐

  1. 【POJ1958】汉诺塔+

    题目大意:给定一个四个柱子的汉诺塔,N 个盘子,求最少多少步移动到另一个柱子上. 题解:\(f[n]=min(2*f[i]+d[n-i])\),其中 \(d[i]\) 为汉诺三塔最小移动次数.M 塔同 ...

  2. error： The function/feature is not implemented (Odd-size DCT's are not implemented)in function cvDCT.

    然后我在使用函数cvDCT(...)时,它所处理的矩阵的行数和列数必须是偶数.如果行列中任何一个是奇数,则会报错,如下:   The function/feature is not  implemen ...

  3. 借读：分布式锁和双写Redis

      本帖最后由 howtodown 于 2016-10-3 16:01 编辑问题导读1.为什么会产生分布式锁?2.使用分布式锁的方法有哪些?3.本文创造的分布式锁的双写Redis框架都包含哪些内容? ...

  4. Scala进阶之路-高级数据类型之数组的使用

    Scala进阶之路-高级数据类型之数组的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数组的初始化方式 1>.长度不可变数组Array 注意:顾名思义,长度不可变数 ...

  5. 模拟生成环境的MySQL安装方法-通用二进制方式安装

    模拟生成环境的MySQL安装方法-通用二进制方式安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.并发响应用户请求的网络IO模型 1>.单进程 特点:一个进程响应一个请 ...

  6. [整理]zepto的初次使用

    http://www.css88.com/doc/zeptojs_api/ http://chaoskeh.com/blog/some-experience-of-using-zepto.html

  7. 一组数字，从1到n，从中减少了3个数，顺序打乱，放在n-3的数组里,找出丢失数字

    曾经看到有这样一个JS题:有一组数字,从1到n,从中减少了3个数,顺序也被打乱,放在一个n-3的数组里请找出丢失的数字,最好能有程序,最好算法比较快假设n=10000 下面我也来贴一个算法. func ...

  8. 关于Asp.Net中的编程实现下载

    经常在论坛看见有人求Asp.Net中编程实现下载的代码,有些还希望能断点续传什么的.其实问题的关键在于权限.B/S和C/S不仅仅是外观上的区别而已. 下载,顾名思义是客户端要下,所以载.你硬塞給人家那 ...

  9. 20155306 2016-2017-2 《Java程序设计》第5周学习总结

    20155306 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 异常处理 8.1 语法与继承架构 Java中所有错误都会被打包为对象,运用try.c ...

  10. react componentWillReceiveProps 使用注意

    componentWillReceiveProps(nextProps) 请务必使用 nextProps  不要使用 this.props 1个小时的教训...