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 设置为 ...
随机推荐
- 个推应用统计产品(个数)Android集成实践
前段时间,我们公司的产品又双叒叕给我们提了新需求,要求我们把APP相关的数据统计分析一下,这些指标包括但不限于应用每日的新增.活跃.留存率等等,最好每天都能提供数据报表.这种事情真是想想就麻烦,大家最 ...
- CSS Counter Style试玩儿
2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...
- win10内建子系统Linux
从cmd中下载linux和linux终端安装程序一样 最新要从商店购买(当然是免费) ubuntu openSUSE SUSE 3个 创建用户
- Here’s just a fraction of what you can do with linear algebra
Here’s just a fraction of what you can do with linear algebra The next time someone wonders what the ...
- Java SSM框架之MyBatis3(六)MyBatis之参数传递
一.单个参数 StudentParamsMapper package cn.cnki.ref.mapper; import cn.cnki.ref.pojo.Student; public inte ...
- 小议 html 实体解析
今天分享个小技巧,是群里一个朋友问的,"请问 + 这种类型的字符串怎么转换成我们想要的字符 + ,有什么简便的js方法吗"其实问题说简单也简单,说难也难.我们要分情况来描述问题解决 ...
- [整理]CSS3 滤镜
1.灰度 兼容 http://www.526net.com/blog/qianduan/226.html http://james.padolsey.com/demos/grayscale/grays ...
- ASP.NET生成二维码
下面使用ThoughtWorks.QRCode.dll这个类库,实现生成二维码 使用时需要增加:下面三个命名空间 using ThoughtWorks.QRCode.Codec; using Thou ...
- 最短路 spfa+STL
与迪杰斯特拉相同的是spfa也是用来求单源点的最短路径问题,但是,当问题中的边是有向负边的时候,迪杰斯特拉就无能为力了, 而且给我的感觉是spfa如何结合STL来用的话代码比迪杰斯特拉的还要短一点,只 ...
- android ViewPager之PagerAdapter中View的重用
在写PagerAdapter的时候,需要重写instantiateItem(ViewGroup container ,int position) 此方法中,将需要加载的View,添加到conta ...