*首先要清楚的是，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. linux文件名匹配——通配符使用

    背景:在linux使用过程中,经常需要查找文件,对命令中的通配符pattern和正则表达式的区分不是很清楚.有必要好好研究一下. 1 扫盲 1.1 通配符和正则表达式 当在使用命令行时,有很多时间都用 ...

  2. eclipse java build path问题汇总

    背景:在项目开发过程中,很多应用都进行了模块划分,有的时候是jar包依赖,有的时候通过build path进行配置,搞清楚这部分有助于理解项目之间的关系. 1 tms项目开发 1.1 问题描述 项目结 ...

  3. linux command ------ watch

    watch命令以周期性的方式执行给定的指令,指令输出以全屏方式显示.watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果, ...

  4. SQL Server - 开窗函数

    -- 开窗函数:在结果集的基础上进一步处理(聚合操作) SELECT * FROM dbo.Student S# Sname Sage Ssex ---------- ---------- ----- ...

  5. Javascript面向

    一.前言 面向对象:专注于由哪一个对象来解决这个问题,编程特点是出现了一个类,从类中拿到对象,由这个对象去解决具体问题.       对于调用者来说,面向过程需要调用者自己去实现各种函数.而面向对象, ...

  6. Zabbix应用五:Zabbix监控多Tomcat

    利用Zabbix Trapper方式监控多Tomcat实例 Zabbix自带的模版(JMX Tomcat.JMX Generic)默认只能在一台机器上监控一个tomcat实例(因为监控项中的key不能 ...

  7. linux - 流量切分线路

    流量切分线路方式 # 程序判断进入IP线路,设置服务器路由规则控制返回 vi /etc/iproute2/rt_tables #添加一条策略 bgp2 #注意策略的序号顺序 ip route add ...

  8. Xgboost理解

    一.xgboost模型函数形式 xgboost也是GBDT的一种,只不过GBDT在函数空间进行搜索最优F的时候,采用的是梯度下降法也就是一阶泰勒展开:而xgboost采用的是二阶泰勒展开也就是牛顿法, ...

  9. Oracle中Inventory目录作用以及如何重建此目录 oraInst.loc 文件

    inventory 英 [ˈɪnvəntri] 美 [ˈɪnvəntɔ:ri] n. 清查; 存货清单; 财产目录,财产目录的编制; 存货总值; vt. 盘存; 编制…的目录; 开列…的清单; 总结 ...

  10. mysql percona安装

    注:此方式目前安装存在问题(弃用此方式) 1.在官方网站下载percona  XtraBackup https://www.percona.com/downloads/XtraBackup/LATES ...