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 设置为 ...
随机推荐
- 【codevs2205】等差数列
题目大意:给定一个长度为 N 的序列,求这个序列中等差数列的个数. 题解:根据题意应该是一道序列计数 dp.设 \(dp[i][j]\) 表示以第 i 项结尾,公差为 j 的等差数列的个数,则状态转移 ...
- 安装hadoop1.2.1(参考hadoop实战第二版)
准备: 安装jdk和ssh. 1. 官网下载hadoop1.2.1 hadoop-1.2.1.tar.gz http://hadoop.apache.org/releases.html 2. 解压到/ ...
- Java基础-二进制以及字符编码简介
Java基础-二进制以及字符编码简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 想必计算机毕业的小伙伴或是从事IT的技术人员都知道数据存储都是以二进制的数字存储到硬盘的.从事开 ...
- Spring Boot 1.4 单元测试
在1.3中单元测试这样子的类似代码: // SpringJUnit支持,由此引入Spring-Test框架支持! @RunWith(SpringJUnit4ClassRunner.class) // ...
- SHELL (3) —— 变量知识进阶和实践
摘自:Oldboy Linux运维——SHELL编程实战 SHELL中特殊切重要的变量 位置变量 作用说明 $0 获取当前执行的Shell脚本的文件名,如果执行脚本包含了路径,那么就包括脚本路径 $n ...
- 20155328 2016-2017-2 《Java程序设计》第六周 学习总结
20155328 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 根据不同的分类标准,IO可分为:输入/输出流:字节/字符流:节点/处理流. 在不使用Inpu ...
- springboot自定义SpringApplication启动类
如果默认的SpringApplication不符合你的口味,你可以创建一个本地的实例并自定义它.例如,关闭banner你可以这样写: public static void main(String[] ...
- javascript-词法分析解析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- _findfirst和_findnext
1.首先是_finddata结构体,用于存储文件信息的结构体. 2._findfirst函数:long _findfirst(const char *, struct _finddata_t *); ...
- Python外部脚本调用Django项目Model表
在实际生产中有时候会出现这种情况,原本运行了一个Django项目,后面又需要一些外部脚本进行辅助,而这些脚本又不希望集成到项目当中,但是又需要用到Django项目的Model,这时候是无法像在项目当中 ...