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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368424.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JDK 8 Javadoc调整了方法列表

自开始以来&#xff0c; Javadoc输出基本上是静态HTML&#xff0c;具有导航链接和外观的简单样式表样式。 Java SE 7很长时间以来就看到Javadoc输出默认外观的第一个重大变化 &#xff0c;现在看来JDK 8将在生成的Javadoc输出上引入新的变化。 在本文中&#xff0c;我将通过JDK…

hdp安装 不安装mysql_hdp安装及使用问题汇总(一)

1)安装HDP时&#xff0c;如果打印如下错误信息&#xff1a;[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:579)是由于系统的python版本过高&#xff0c;导致验证ssl失败&#xff0c;将python降级为2.7.5以下或修改每个安装节点的python证书验证配置文件…

PhotoSphereViewer 全景图

1网站地址&#xff1a;http://photo-sphere-viewer.js.org/markers.html#demo 2参数中文地址&#xff1a;https://www.cnblogs.com/big-tree/p/5933437.html 使用方法&#xff1a; /*** Initialize the viewer*/ var PSV new PhotoSphereViewer({ // main configuration panor…

常用Lunix命令

计算机 1.硬件系统 输入单元、输出单元、算术逻辑单元、控制单元、记忆单元 中央处理单元&#xff1a;CPU&#xff08;算术逻辑单元、控制单元&#xff09; 电源、主板、CPU、内存&#xff08;RAM&#xff09;、硬盘、&#xff08;声卡、显卡、网卡&#xff09;&#xff08;集成…

angularJS constant和value

angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。 相同点是&#xff1a;都可以接受两个参数&#xff0c;name和value。 区别&#xff1a; 1.constant(name,value)可以将一个已经存在的变量值注册为服务&#xff0c;并将其注入到应用的其他…

让我们编写一个文档样式的Web服务

您可能知道&#xff0c;我们可以使用四种主要的Web服务样式。 它们如下&#xff1a; 文件/文学 包装的文件/文学 RPC /编码 RPC /文字 当然&#xff0c;现在不建议使用RPC /编码样式。 如果您有兴趣&#xff0c;可以在此处找到这篇非常全面的文章&#xff0c;以了解不同的…

linux 进入容器,查看和关闭进程

1&#xff0c;linux 查询容器 ID&#xff1a; docker ps 2&#xff0c;进入容器&#xff08;退出 exec 命令用&#xff1a;[ctrlD] &#xff0c;不会终止容器运行。退出 top 命令&#xff1a;ctrl C&#xff09; docker exec -it c39c9d3898c0 /bin/bash 3&#xff0c;查询进程…

mysql表单查询_MySQL表单集合查询

表单查询简单查询SELECT语句查询所有字段指定所有字段&#xff1a;select 字段名1,字段名2&#xff0c;...from 表名;select * from 表名;查询指定字段select 字段名1,字段名2&#xff0c;...from 表名;按条件查询带关系运算符的查询SELECT 字段名1,字段名2,……FROM 表名WHERE…

解决阿里云OSS跨域问题

解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次&#xff0c;第一次通过img标签进行&#xff0c;第二次通过异步加载获取。第一次请求到图片&#xff0c;浏览器会进行缓存&#xff0c;随后再进行异步请求&#xff0c;保存跨域失效。 错误信息如下&#xff1a…

css之hover改变子元素和其他元素样式

参考地址&#xff1a;链接 表示下一级元素&#xff0c;>表示子元素 1 <!DOCTYPE html>2 <html>3 <head lang"en">4 <meta charset"UTF-8">5 <title></title>6 </head>7 8 <style>9 #a {co…

将JacpFX客户端与JSR 356 WebSockets一起使用

JSR 356 WebSockets是即将发布的JEE 7版本中令人兴奋的新功能之一&#xff0c;并且在其参考实现中包括Server-和Client API。 这使其非常适合在客户端与JavaFX集成。 JacpFX是JavaFX之上的RCP框架&#xff0c;它使用基于消息的方法与组件进行交互。 这种基于消息的方法使集成We…

nagios check_mysql uptime_nagios使用check_mysql监控mysql

如果没有check_mysql插件&#xff0c;需要安装Mysql数据库1、建立专用数据库&#xff1a; [rootsvr3 ~]#mysql -u root -pEnter password:Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL connection id is 51910Server version: 5.5.3-m3-log Source di…

《精通Spring4.X企业应用开发实战》读后感第七章(AOP概念)

转载于:https://www.cnblogs.com/Michael2397/p/8068486.html

XHTML与HTML的区别

XHTML的语法较为严谨&#xff0c;拥有一定的规则&#xff0c;如果不遵循规则的话容易出错。但也不必太过担心&#xff0c;因为XHTML的规则并不太难&#xff0c;它和HTML4.01标准没有太多的不同。 需要注意的是以下几点&#xff1a; 1.XHTML标签必须被正确的关闭&#xff0c;即…

EC2上的ElasticSearch不到60秒

好奇地看到所有ElasticSearch轮奸是关于什么的&#xff1f; 想在没有大量肘部油脂的情况下看到它吗&#xff1f; 然后&#xff0c;朋友&#xff0c; 别再犹豫了-不到60秒&#xff0c;我将向您展示如何在AWS AMI上安装ElasticSearch 。 您首先需要一个AWS账户以及一个SSH密钥对…

Material使用04 MdCardModule和MdButtonModule综合运用

设计需求&#xff1a;设计一个登陆页面 1 模块导入 1.1 将MdCardModule和MdButtonModule模块导入到共享模块中 import { NgModule } from angular/core; import { CommonModule } from angular/common; import { MdSidenavModule, MdToolbarModule,MdIconModule,MdButtonModule…

mysql子分区多少层_MYSQL子分区修剪

我有一个MYSQL表与分区的年份和子分区的月份。MYSQL子分区修剪CREATE TABLE ptable (id INT NOT NULL AUTO_INCREMENT,name varchar(100),purchased DATETIME NOT NULL,PRIMARY KEY (id, purchased))PARTITION BY RANGE(YEAR(purchased))SUBPARTITION BY HASH(MONTH(purchased)…

65. Valid Number

Validate if a given string is numeric. Some examples:"0" > true" 0.1 " > true"abc" > false"1 a" > false"2e10" > true 判断字符串是否代表了有效数字。 这道题有点坑&#xff0c;情况比较多…… 1 cl…

python实现bp神经网络对csv文件进行数据预测

参考资源&#xff1a; sklearn库 bp神经网络[从原理到代码一篇搞定]&#xff08;2&#xff09;_sklearn 神经网络-CSDN博客 十分钟上手sklearn&#xff1a;安装&#xff0c;获取数据&#xff0c;数据预处理 - 知乎 (zhihu.com) 一个实例讲解如何使用BP神经网络(附代码) - 知…

html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切

众所周知&#xff0c;一般的屏蔽的方法是用JS来编写的脚本&#xff0c;但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制。 禁止右键 οncοntextmenu"return false" 禁止复制和剪切&#xff1a; οncοpy"return false;" oncut"return fa…