*首先要清楚的是，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. debian及ubuntu挂载本地硬盘的ISO镜像文件

    1.定位Debian ISO镜像的位置,比如说sda3 fdisk -l 2.挂载: # mount -t auto /dev/sda3 /media/mnt 生成isodebian路径 /mnt# ...

  2. 【转载】SQL注入原理讲解

    这几篇文章讲的都很不错,我看了大概清除了sql注入是怎么一回事,打算细细研究一下这个知识,另写一篇博客: 原文地址:http://www.cnblogs.com/rush/archive/2011/1 ...

  3. 第六节 事务XML方式[声明方式]

    事务管理: 管理事务,管理数据,数据完整性和一致性 事务[业务逻辑] : 由一系列的动作[查询书价格,更新库存,更新余额],组成一个单元[买书业务], 当我们动作当中有一个错了,全错~ ACID 原子 ...

  4. 《高性能MySQL》——第五章创建高性能索引

    1.创建索引基本语法格 在MySQL中,在已经存在的表上,可以通过ALTER TABLE语句直接为表上的一个或几个字段创建索引.基本语法格式如下: ALTER TABLE 表名 ADD [UNIQUE ...

  5. 这两天自己模仿写的一个Asp.Net的显示分页方法 附加实体转换和存储过程

    之前自己一直用Aspnetpager控件来显示项目中的分页,但是每次都要拖一个aspnetpager的控件进去,感觉很不舒服,因为现在自己写的webform都不用服务器控件了,所以自己仿照aspnet ...

  6. Windows bat 学习（初级）

    http://steve-jansen.github.io/guides/windows-batch-scripting/part-1-getting-started.html 注释:REM 或 :: ...

  7. Django之模板语法

    Django框架之第三篇模板语法(重要!!!) 一.什么是模板? 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法分类 一.模板语法之变量:语法为 {{ }}: ...

  8. PHP5.6 和PHP7.0区别

    1. PHP7.0 比PHP5.6性能提升了两倍. 2.PHP7.0全面一致支持64位. 3.PHP7.0之前出现的致命错误,都改成了抛出异常. 4.增加了空结合操作符(??).效果相当于三元运算符. ...

  9. USB枚举过程【转】

    转自:http://blog.csdn.net/myarrow/article/details/8270029 1. 枚举是什么?        枚举就是从设备读取一些信息,知道设备是什么样的设备,如 ...

  10. Springboot 之 自定义配置文件及读取配置文件

    本文章来自[知识林] 读取核心配置文件 核心配置文件是指在resources根目录下的application.properties或application.yml配置文件,读取这两个配置文件的方法有两 ...