CSS 有趣的边框
2024-10-15 07:37:42
今天看到一篇文章。是利用CSS边框来做折纸效果。感觉非常有意思。于是就对CSS的border研究了一下。发现还真有一些好玩的使用方法。
1.border折纸效果
首先是HTML代码,为了简单,就一个div:
<div class="note">
折纸效果
</div>
然后我们为它加上边框效果:
.note{
display:block;
margin:100px auto;
width:100px;
height:100px;
background:#ff0;
border:1px solid #000;
}
这是最简单最丑的边框效果了,看起来像这样:
果然边框太细了看不到细节,我们把边框设粗一点,然后把每一个方向的边框颜色改一下:
.note{
display:block;
margin:100px auto;
width:100px;
height:100px;
background:#ff0;
border-width:10px 10px 10px 10px;
border-color:#aa0 #f0f #512 #a21;
border-style:solid;
}
效果例如以下:
瞬间产生3D效果了有木有!我们继续把边框设粗。然后把容器的height设为0:
.note{
display:block;
margin:100px auto;
width:100px;
height:0px;
background:#ff0;
border-width:50px;
border-color:#aa0 #a21 #740 #a21;
border-style:solid;
}
瞬间产生信封的效果了有木有!我们继续把width也设为0,效果像这样(代码就不贴了):
是不是有一种金字塔的感觉呢!
好了,就玩到这里。之前说了做折纸效果,如今想想应该是SO EASY了,先看效果图:
note还是原来的note,仅仅是给note加了一个before伪元素。设置伪元素宽度为0,内容为空。利用边框做出三角形效果,然后通过绝对定位到右上角,最后加上阴影效果就ok啦。
代码例如以下:
.note{
display:block;
margin:100px auto;
width:100px;
height:100px;
background:#ff0;
padding:50px;
position:relative;
}
.note:before{
content:"";
width:0;
border-color:#fff #fff transparent transparent;
border-style:solid;
border-width:20px;
position:absolute;
top:0;
right:0; -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
}
原来的HTML代码全然没变。仅仅是更改了CSS样式而已,全然不影响语义化。
另附上CSS 中 border的属性:
另外,border-style本身也有支持3D效果的属性。下面是border-style的可选值:
2.升级到CSS3
CSS3中添加了图片边框border-image,圆角border-raduis,多颜色边框border-color。
圆角用的比較多。多颜色边框能够做到边框颜色渐变效果(眼下仅仅有FF30支持,兼容性不好),border-image效果非常赞,能九宫格切分图片,做到边框尺寸自适应,学习參考:http://www.w3school.com.cn/cssref/pr_border-image.asp
总结:平时布局的时候都有一个经常使用的写法,可是还有非常多属性值我们没实用到,去发掘一下的话可能会有意想不到的惊喜!
大家要是还有边框的有趣玩法,欢迎分享~~
最新文章
- thinkphp model模块
- Javascript.Reactjs-5-prop-validation-and-proptypes
- ACM/ICPC 之 数论-斐波拉契●卢卡斯数列(HNNUOJ 11589)
- hihoCoder 1305 区间求差
- [emacs org-mode小技巧] org-indent-mode 让文档更容易阅读
- [Unity3D] 和Unity3D的一些事
- VSim [a Racing-simulator by Vell001]
- ClassLoader(摘录)
- 【转】Java 字符串常用操作(String类)
- window环境下安装 pip 工具 【pip为Python的扩展管理工具】
- android-数据持久化
- 编写存储过程导出oracle表数据到多个文本文件
- Apache自带压力测试工具----linux环境中ab命令简介及结果分析
- 在平衡树的海洋中畅游(一)——Treap
- Appium学习笔记4_元素定位方法
- java 实现单向链表
- tcpdump命令抓包参数
- Java虚拟机 - 结构原理与运行时数据区域
- xml文件的序列化示例
- Homework 4
热门文章
- ZOJ 刷题记录 小黑屋 (`・д・&#180;)
- 将日期和时间作为 struct tm型的值直接向二进制文件进行读写
- javascript——可以判断值的类型的函数
- C# ToString常用技巧总结
- InvalidArgument=Value of &#39;1&#39; is not valid for &#39;index&#39;
- [Android分享] 彻底理解ldpi、mdpi、hdpi、xhdpi、xxhdpi
- ASP.NET MVC轻教程 Step By Step 2 ——View初探
- STM32自带的bool型变量
- 如何更好辨认House of hello恶搞包的真假
- Node.js包(JXcore)