CSS实现多重边框和内凹圆角
CSS实现多重边框
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>CSS实现多重边框</title>
<style>
div {
width: 100px;
height: 150px;
margin: 40px auto;
text-align: center;
background: lightblue;
border: 20px solid cornflowerblue;
}
#box1 {
outline: 5px solid chocolate;
outline-offset: -10px; /*outline描边模拟的边框会在真正边框的里面,但是描边没有办法贴合圆角的位置*/
}
#box2 {
/*盒子阴影实现双重边框,第四个参数表示投影扩张的像素,","分隔绘制多个投影*/
-webkit-box-shadow: 0 0 0 5px brown,
0 0 0 10px yellow,
0 0 0 15px green;
-moz-box-shadow: 0 0 0 5px brown,
0 0 0 10px yellow,
0 0 0 15px green;
box-shadow: 0 0 0 5px brown,
0 0 0 10px yellow,
0 0 0 15px green;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
</style>
</head>
<body> <div id="box1">box1</div>
<div id="box2">box2</div>
<h1>box1和box2的绘制方式都不会影响布局</h1> </body>
</html>
CSS实现内凹圆角的思路【截图来自慕课网】:
CSS实现多重边框和内凹圆角的更多相关文章
- css边框内凹圆角,解决优惠券的边框问题
关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...
- CSS布局技巧 -- 内凹圆角
圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...
- CSS-论css如何纯代码实现内凹圆角
background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px); 这是做内凹圆角的核心代码,就是背景图的ra ...
- 【基础】CSS实现多重边框的5种方式
简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求 ...
- CSS揭秘—多重边框(二)
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
- css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...
- css多重边框
一.使用box-shadow实现多重边框 html <div class="multiple"></div> css .multiple{ backgrou ...
- CSS揭秘之多重边框&连续的图像边框
1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...
- [css 揭秘]:CSS揭秘 技巧(二):多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
随机推荐
- UncategorizedSQLException Mybatis中jdbcType的作用
使用MyBatis框架做更新操作时,在该字段需要更新的内容为空时,就会出现1111错误,也就是无效的列类型,这个时候你就要使用jdbcType.至于什么时候要使用到javaType我还没遇到过,而且我 ...
- 缩点【洛谷P1262】 间谍网络
[洛谷P1262] 间谍网络 题目描述 由于外国间谍的大量渗入,国家安全正处于高度的危机之中.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A可以揭发B.有些间谍收受贿赂,只要给他们一定数量的美元,他 ...
- NYOJ1238 最小换乘 (dijkstra)
最少换乘 时间限制:2000 ms | 内存限制:65535 KB 难度:3 描述 欧洲某城是一个著名的旅游胜地,每年都有成千上万的人前来观光旅行.Dr. Kong决定利用暑假好好游览一番.. ...
- Lack of free swap space on zabbix
把监控项修改成 {Template OS Linux:system.swap.size[,pfree].last()}< and {Template OS Linux:system.swap.s ...
- Java快速IO(ACM)必备
en.... 无非用到的是 1. new Scanner(System.in); 2.new BUfferReader(new InputStreamReader(System.in); 3.Syst ...
- Python迭代器生成器,模块和包
1.迭代器和生成器 2.模块和包 1.迭代器 迭代器对象要求支持迭代器协议的对象,在Python中,支持迭代器协议就是实现对象的__iter__()和__next__()方法. 其中__it ...
- java拦截器的使用
转载: https://www.cnblogs.com/liangblog/p/7234757.html https://blog.csdn.net/reggergdsg/article/detail ...
- python模块之wordcloud
wordcloud官方文档: http://amueller.github.io/word_cloud/generated/wordcloud.WordCloud.html#wordcloud.Wor ...
- 关于WampServer一些配置修改
1.解决WAMP mysql中文乱码问题(在mysql的my.ini文件中) 1).找到client字段并添加:default-character-set=utf8 2).找到mysql字段并添加: ...
- android Activity启动过程(四)startActivityUncheckedLocked
final int startActivityUncheckedLocked(ActivityRecord r, ActivityRecord sourceRecord, IVoiceInteract ...