CSS3利用一个div实现内圆角边框效果
*首先要清楚的是，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实现内圆角边框效果的更多相关文章
- [css]《css揭秘》学习（四）-一个元素实现内圆角边框
如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...
- css3实现一个div设置多张背景图片及background-image属性
CSS3/CSS1 background-image 属性 语法: background-image:<bg-image> [ , <bg-image> ]* <bg-i ...
- 向 div 元素添加圆角边框：
div { border:2px solid; border-radius:25px; }
- CSS3 阴影与圆角边框
㈠css3的新特性实际应用 ⑴文本阴影效果,用代码编写的方式实现 ⑵鼠标悬停的动态效果 左侧三幅图片,上面初始状态是没有说明文本的,但把鼠标放在上面的时候,这个图片上面就出现了说明文字 ⑶分栏 ...
- css3如何实现圆角边框
圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...
- CSS3实现多样的边框效果
半透明边框 实现效果: 实现代码: <div> 你能看到半透明的边框吗? </div> div { /* 关键代码 */ border: 10px solid rgba(255 ...
- 50个Android开发技巧(12 为控件加入圆角边框)
控件的圆角边框能够使你的App看起来更美观,事实上实现起来也非常easy. (原文地址:http://blog.csdn.net/vector_yi/article/details/24463025) ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- CSS3_边框 border 详解_一个 div 的阴阳图
(面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框 足够大 3. 需要的三角形的部分, border-top-color 设置为 ...
随机推荐
- Helm一：简介
目录 什么是Helm Helm解决的问题 Helm原理 Helm架构 Helm功能 Helm三个重要概念 Helm组件 Helm Client Tiller Server Helm实现 什么是Helm ...
- P3959 宝藏
P3959 宝藏 题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 nn 个深埋在地下的宝藏屋, 也给出了这 nn 个宝藏屋之间可供开发的 mm 条道路和它们的长度. 小明决心亲自前往挖掘 ...
- 转：Xcode打印堆栈信息
2# 分享于 14-11-26 19:15:36 Chrome 39.0.2171.71 Mac OS X 10.10.1 如果只是看调用栈的话,可以使用 lldb 的功能.在你的代码里面打上一个 ...
- 最长回文子串问题－Manacher算法
转:http://blog.csdn.net/dyx404514/article/details/42061017 Manacher算法 算法总结第三弹 manacher算法,前面讲了两个字符串相算法 ...
- JavaScript1.6数组新特性和JQuery的几个工具方法
JavaScript 1.6 引入了几个新的Array 方法,具体的介绍见:New in JavaScript 1.6 .这些方法已经被写进了ECMA262 V5.现代浏览器(IE9/Firefox/ ...
- spring Mvc Web 编码相关 [model 到 视图传递数据] (九)
在某种编码环境,由bean注解的参数可能会发生乱码问题. 即可页面web.xml或其他地方都设备UTF-8, 但还是会有这样的问题. 首先不要使用model传到视图的数据. 第二,不要request. ...
- 【51Nod】1273 旅行计划 树上贪心
[题目]51Nod 1273 旅行计划 [题意]给定n个点的树和出发点k,要求每次选择一个目的地旅行后返回,使得路径上未访问过的点最多(相同取编号最小),旅行后路径上所有点视为访问过,求旅行方案.\( ...
- Hive笔记之严格模式（strict mode）
Hive有一个严格模式,在严格模式下会对可能产生较大查询结果的语句做限制,禁止其提交执行. 一.切换严格模式 查看当前的模式: hive> set hive.mapred.mode; hive. ...
- Linux内核源码分析--内核启动之(4)Image内核启动(setup_arch函数)（Linux-3.0 ARMv7）【转】
原文地址:Linux内核源码分析--内核启动之(4)Image内核启动(setup_arch函数)(Linux-3.0 ARMv7) 作者:tekkamanninja 转自:http://blog.c ...
- tar压缩文件排除文件夹【原创】
例如压缩redis-3.2.0目录,但是不想压缩redis-3.2.0下面的src目录 -. --exclude=redis-/src 注意--exclude=redis-3.2.0/src后面一定不 ...