【前端学习】- border 及border绘制三角形、box-shadow、border-radi

pinecone 发布于2019-08-29 14:01 / 2543人阅读

摘要：是围绕元素内容和内边距的一条或多条线，属性允许你规定元素边框的样式宽度和颜色。文章将讲一些的基础知识，及围绕绘制三角形及和的小技巧。值粗细颜色默认颜色是字体颜色类型可以综合写成注意点边框是绘制在背景之上，因此。

border是围绕元素内容和内边距的一条或多条线，border属性允许你规定元素边框的样式、宽度和颜色。文章将讲一些border的基础知识，及围绕border绘制三角形及box-shadow和border-radius的小技巧。

值：
border-width 粗细
border-color 颜色默认颜色是字体颜色
border-style 类型 none/hidden/solid/dashed/dotted
可以综合写成：border:width color style

注意点：
边框是绘制在背景之上，因此。有些透明的背景会与边框重合。这些在之前的文章background写到过，链接地址https://segmentfault.com/a/11...

技巧一：利用border实现三角形

总结：
1.设置一个边border有颜色，设置旁边两条边border颜色透明，不设置对边border,三角形指向无设置边的方向（如6,7情况）
2.设置一个边border有颜色，设置旁边1条边border颜色透明，其他两条边border不设置（如8情况，是在图7的情况之上去掉了上边）

技巧二：利用box-shadow实现各类投影：单侧、对侧、双侧（IE9+）

技巧三：利用border-radius实现椭圆，1/2椭圆，1/4椭圆（IE9+）

这些在之前的文章border-radius写到过，链接地址https://segmentfault.com/a/11...

云服务器 GPU云服务器 border border属性 border_box border-collapse

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112863.html

基于单个 Div 的 CSS 绘图

摘要：原文译文基于单个的绘图译者前端外刊评论译注通读本文，强烈地感受到了技术与艺术的结合赞作者的这句话限制你的可选项，会让你重新评估手头上已有的工具。不过若能有效地使用，我们的绘图可以包含很多令人惊叹的细节。原文： Single Div Drawings with CSS 译文：基于单个 div 的 CSS 绘图译者：前端外刊评论译注：通读本文，强烈地感受到了技术与艺...

booster 2019-08-01 14:40 评论0 收藏0
常用前端布局，CSS技巧介绍

摘要：不推荐，特别是九宫格通过来实现。有一定的兼容性问题元素高度可变，需要元素内部元素水平垂直居中主要是垂直方案通过实现，给最外部元素，同时添加一个次外层元素设置，这时第三层的元素即可垂直居中。常用前端布局，CSS技巧介绍对前端常用布局的整理总结，并对其性能优劣，兼容等情况进行介绍 showImg(https://segmentfault.com/img/bVbjkih); css常用技...

Rocture 2019-08-02 11:58 评论0 收藏0
常用前端布局，CSS技巧介绍

摘要：不推荐，特别是九宫格通过来实现。有一定的兼容性问题元素高度可变，需要元素内部元素水平垂直居中主要是垂直方案通过实现，给最外部元素，同时添加一个次外层元素设置，这时第三层的元素即可垂直居中。常用前端布局，CSS技巧介绍对前端常用布局的整理总结，并对其性能优劣，兼容等情况进行介绍 showImg(https://segmentfault.com/img/bVbjkih); css常用技...

EsgynChina 2019-08-29 17:13 评论0 收藏0
2017前端实习生面试总结

摘要：最近开始了几次面试，虽然还不知道结果如何，但是还是要记录下来进行一个总结，同样也希望对正在准备面实习生的童鞋们有所帮助最后一个参数是做什么用的答规定事件是冒泡还是捕获。应该不对学习前端的同学们，欢迎加入前端学习交流群一起学习交流最近开始了几次面试，虽然还不知道结果如何，但是还是要记录下来进行一个总结，同样也希望对正在准备面实习生的童鞋们有所帮助~1.JavaScript : add...

zacklee 2019-08-21 17:22 评论0 收藏0