border三角形阴影(不规则图形阴影)和多重边框的制作
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
1. border的组合写法
border:border-width border-style border-color;
border-width:边框宽度,不能为百分比,因为不会根据设备宽度改变;同理,outline | text-shadow | box-shadow 也不可以;
border-style:边框样式,一般用solid多一点,dashed(虚线)、dotted(点状线)也有;
border-color:边框颜色,默认颜色是元素的文本颜色,如果没有设置,那就从父元素继承文本颜色;
边框可以根据方向单独设置,上下左右,border-top | border-bottom | border-left | border-right ;
所以属性也可以单独设置,border-top-width | border-top-style | border-top-color ;
单属性也可以有组合写法:
border-width:上 右 下 左;(顺时针方向)
border-width:上 左右 下;
border-width:上下 左右 ;
border-width:四个方向;
border-style | border-color也可以这样设置;
还可以根据方向来用组合写法:
border-left : 边框宽度 边框样式 边框颜色;
2. 用border做图形
边框的交界处是斜线,大师们用这个特性做出了三角形,配合其他属性,可以做出各种图形;
原理就是控制四个方向的边框颜色,就可以做出三角形;再控制宽度,就可以做出各种不同的钝角、锐角三角形;
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.triangle{border-style:solid;border-width: 30px 50px 60px 80px;/*我们可以控制各方向边框的宽度,做出各种不同的三角形*/border-color: #f00 #0f0 #00f #0ff;/*四个方向的颜色自由设置,当设置其他三个方向或两个方向的颜色为transparent(透明色)时,另一方向就成了一个三角形*/width: 0;/*盒子宽度为0,四个方向的border宽度一致,可以用border做正方形*/margin: 100px;}</style></head><body><div class="triangle"></div></body>
</html>
我比较喜欢根据方向来写三角形,这样容易理解:
.triangle{border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #0ff;/*我们一般根据方向来写三角形,这样容易记忆;箭头指向的反方向的颜色设置为你想要的,然后箭头方向不要写,另外两个方向的颜色设置为transperent透明*/}
3.小三角的阴影
三角形做出来了,但是当我们给元素定义一个box-shadow,会出现如下情况:
如果不想要阴影,很好解决,删掉三角形的box-shadow就好了;
而在实际应用中,我们很多情况下是需要阴影的,只是阴影出现在三角形的两条边上,下图给容器设置了阴影;
方法一:我们可以在加一个元素,也写成三角形,设置层级比箭头和容器元素都小,并且设置滤镜,位置比箭头稍高,露出边缘部分就可以了;
当我们把之前的箭头删掉,就是如右图:
完成品:PS:滤镜也有兼容性问题,建议用谷歌浏览器测试;
以下是代码:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.note{margin: 100px;width: 200px;height: 80px;background: #f60;position: relative;border-radius: 5px;box-shadow: 0 0 10px 0px #000;/*水平偏移---垂直偏移---模糊度---扩张半径---颜色*/}.triangle{border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #f60;/*我们一般根据方向来写三角形,这样容易记忆;箭头指向的反方向的颜色设置为你想要的,然后箭头方向不要写,另外两个方向的颜色设置为transperent透明*/position: absolute;top: -10px;left: 50%;margin-left: -10px;}.filter{border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #000;position: absolute;top: -10px;left: 50%;margin-left: -10px;z-index: -1;filter: blur(2px);/*这又设计到滤镜的知识*/}</style></head><body><div class="wrapper"><div class="note"><span class="triangle"></span><span class="filter"></span></div></div></body>
</html>
View Code
方法二:还是filter,但是设置drop-shadow;
drop-shadow不支持内阴影,但是支持不规则图形的阴影;
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.note{margin: 100px;width: 200px;height: 80px;background: #f60;position: relative;border-radius: 5px;/*box-shadow: 0 0 10px 0px #000;*//*水平偏移---垂直偏移---模糊度---扩张半径---颜色*/filter: drop-shadow(0 0 6px #000);/*看清楚哦,drop-shadow没有扩张半径*/}.triangle{border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #f60;/*我们一般根据方向来写三角形,这样容易记忆;箭头指向的反方向的颜色设置为你想要的,然后箭头方向不要写,另外两个方向的颜色设置为transperent透明*/position: absolute;top: -10px;left: 50%;margin-left: -10px;}</style></head><body><div class="wrapper"><div class="note"><span class="triangle"></span></div></div></body>
</html>
View Code
4.小三角的边框
三角形阴影问题可以这样解决,同理,三角形的边框也可以这样:
写个三角形,沉在箭头下边,颜色设置成边框颜色,位置比箭头稍高一些(容器边框宽度值),就可以了;
接下来我使用:after 和 :before 写的三角形和边框,同理上面的阴影也可以这样;
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.note{margin: 100px;width: 200px;height: 80px;background: #f0f;position: relative;border-radius: 5px;border: 1px solid #000;}.note:after{content: "";border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #f0f;/*我们一般根据方向来写三角形,这样容易记忆;箭头指向的反方向的颜色设置为你想要的,然后箭头方向不要写,另外两个方向的颜色设置为transperent透明*/position: absolute;top: -10px;left: 50%;margin-left: -10px;}.note:before{content: "";border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #000;position: absolute;top: -11px;/*写个三角形,沉在箭头下边,颜色设置成边框颜色,位置比箭头稍高一些(容器边框宽度值),就可以了*/left: 50%;margin-left: -10px;z-index: -1;}</style></head><body><div class="wrapper"><div class="note"></div></div></body>
</html>
View Code
5. border-radius圆角
css3属性border-radius,“边框半径”,值可以用px、em、pt、百分比等;
border-radius支持四个角使用不同弧度,方向依次是左上--右上--右下--左下(是从左上开始,顺时针);
border-radius还可以单独对每个角设置:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
单独设置可以写两个值,第一个值是水平半径,第二个值是垂直半径;如果只有一个值,那么水平和垂直相等;
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}.test{width: 200px;height: 80px;margin: 100px;background: #f0f;border-radius: 15px 20px 35px 50px / 10% 25% 1em 50%;/*水平-----/-----垂直,中间用“/”隔开*//*左上水平 右上水平 右下水平 左下水平 / 左上垂直 右上垂直 右下垂直 左下垂直*//*这种方法不推荐使用,太乱了,傻傻分不清楚*/}</style></head><body><div class="test"></div></body>
</html>
当然,这个属性我们用的最多的就是画圆形,把值设成宽度的一半及以上(50%及以上),border-radius:50%,我就不举列子了;
6. 多重边框
outline制作多重边框
有的需求是边框外面还有边框,我们可以用outline来写,有一个相关的属性outline-offset,可以控制描边与边缘的位置关系,可以设置成负值;
outline制作多重边框,最多只能两层,而且不能是弧形的;
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}.test{margin: 100px;width: 200px;height: 80px;border:10px solid #f0f;outline: 15px solid #f90;outline-offset: -25px;}</style></head><body><div class="test"></div></body>
</html>
View Code
box-shadow制作多重边框
box-shadow可以做很多层(多了会很卡,电脑性能问题),而且配合border-radius属性可以做出弧形;
box-shadow是不占据空间的,所以无法响应事件,我们可以利用inset设置成内阴影,在扩大空间就好了;
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}.test{margin: 100px;width: 200px;height: 80px;border:10px solid #f0f;border-radius: 25% 30% 50% 29%;box-shadow: 0 0 0 10px #0f0 , 0 0 0 20px #ff0 , 0 0 0 10px #0ff inset;/*水平偏移---垂直偏移---模糊度---扩张半径---颜色*//*可以写多个阴影,用逗号隔开*//*inset是内阴影*//*由于box-shadow属性并不占据空间,所以是无法响应事件的,我们可以利用inset内阴影,再用padding扩充空间就好了*/}</style></head><body><div class="test"></div></body>
</html>
View Code
border三角形阴影(不规则图形阴影)和多重边框的制作相关推荐
- html5实现圆圈里带一个三角形,Fabric.js - 详细使用教程1(绘制图形:矩形、圆形、三角形、不规则图形)...
一.绘制图形 1,绘制矩形 下面代码在画布上绘制一个红色圆角矩形,并带有橙色边框. canvas { border: 1px dashed black; } window.onload = funct ...
- 正方形隐藏呈三角形html,border三角形
border:100px solid ; box-shadow: inset 0 1px,inset 1px 0px,inset 0 -1px,inset -1px 0px; width:0px; h ...
- css多重效果,css奇技淫巧—box-shadow与outline绘制多重边框效果
css语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影.该属性是由逗号分隔的阴影 ...
- css 对话框阴影,科技常识:css实现不规则图形的阴影(如对话框)
今天小编跟大家讲解下有关css实现不规则图形的阴影(如对话框) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css实现不规则图形的阴影(如对话框) 的相关资料,希望小伙伴们看了有所帮助. ...
- html中如何写不规则图形,CSS写三角形、五角形等不规则图形
写页面的时候时长遇到一些奇怪图形,用css是可以实现各种不规则图形的,下面举例几个常用的: 一.三角形 利用border-color支持transparent这一特性,隐藏三条边框,实现三角形. .t ...
- 心理阴影面积程序设计c语言,求心理阴影面积……哦不,图形阴影面积的8种方法,你会了么?...
原标题:求心理阴影面积--哦不,图形阴影面积的8种方法,你会了么? 在数学几何考试中,有些图形不是以基本图形的形状出现,而是由一些基本图形组合.拼凑成的,它们的面积及周长无法应用公式直接计算,一般我们 ...
- CSS盒子模型(border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例)
1. 网页布局的本质 首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步 就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
- PPT改变图形阴影的颜色
场景 网上下载的模板自带阴影 改变填充颜色无法顺带改变阴影颜色 解决方法 右键图形 阴影颜色修改为图形颜色 效果
- python 绘制带阴影的图形
python 绘制带阴影的图形 设置图形大小 import numpy as np import matplotlib.pyplot as plt plt.figure(figsize=[4,4]) ...
最新文章
- Android 使用Listview的优化
- iOS 通用宏定义 高效全局宏汇总
- 熊猫直播宣布正式关站 至今已运行1286天
- 手动同步OCS的通讯簿
- Invalidate() UpdateData() OnPaint()与OnDraw
- Java语言基础-反射机制、正则表达式
- 设计模式----简单工厂
- 20190906 On Java8 第十八章 字符串
- 如何在苹果Mac中设置 Excel 文件打印范围刚好是一页纸?
- 《锋利的jQuery》二、jQuery的选择器
- java新闻发布系统源代码_Java新闻发布系统源代码
- https://www.cnblogs.com/skywang12345/category/455711.html
- 基础拍摄前期和基础后期修图
- Win10防火墙放行MySQL3306端口
- 【python】7-4 p019车牌限号
- 153870-20-3,S-acetyl-PEG3-alcohol羟基可以反应进一步衍生化合物
- 菜谱 延安特色美食小吃
- 计算机的发展各阶段使用的元器件是什么,计算机的发展经历了哪几个阶段?各阶段的主要特征是什么?...
- 从eclips到idea
- Qt之QTextEdit
热门文章
- 从拉格朗日乘数法到KKT条件
- 信号与系统 chapter4 单位脉冲与单位阶跃序列
- 32查运行内存的map文件_Spark Shuffle调优之调节map端内存缓冲与reduce端内存占比
- ubuntu16.04安装MATLAB R2017b步骤详解(附完整破解文件包)
- Filter过滤要登录的页面(重要)
- (九十三)蓝牙的基本使用
- [置顶] 状态压缩DP 简单入门题 11题
- POJ-1664 放苹果 动态规划思想解组合数学
- 我的学习开发环境,呵呵!
- 小米羊城通余额不足服务器维护,再不怕羊城通余额不够了!地铁站现自助补票“神器”...