当一个盒容器的两条边框在边角处相交时,浏览器就会在交点处按某个角度绘制接合线。 如果将这个盒容器的width和height设置为0,并为每条边框设置一个较粗的width值和彼此不同的颜色,最终会得到四个被拼接到一起的三角形,它们分别指向不同的方向:
<div id="demo"></div>
#demo {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: yellow green red blue;
}
如果将三个方向的边框颜色设置为透明,那么就得到了一个三角形:
#demo {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: transparent transparent red transparent;
}
综上所述,实现一个纯CSS三角形的要素是:
还可以为相邻边框设置不同的边框宽度来改变三角形的角度。
<div class="circle"></div>
.circle{
width:100px;
height:100px;
border-radius:50px;
background-color:red;
}
要点:
也可以画出椭圆:
.circle{
width:200px;
height:100px;
border-radius:100px /50px;
background-color:red;
}
分别使圆角的半径为宽度和高度的一半。
.circle{
width:100px;
height:50px;
border-radius:50px 50px 0 0;
background-color:red;
}
.circle{
width:100px;
height:100px;
border-radius:100px 0 0 0;
background-color:red;
}
<div id="container">
<div class="element">
</div>
<div class="element">
</div>
</div>
#container{
width:800px;
background-color:#777;
overflow:hidden;
}
.element{
background-color:yellow;
float:left;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.element:first-child{
height:200px;
width:30%;
}
.element:last-child{
height:500px;
width:50%;
float:right;
}
当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的。 但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bottom等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。
可以利用box-shadow属性实现多边框。
#demo {
margin-top:90px;
margin-left:90px;
width: 200px;
height: 50px;
background-color:#eee;
box-shadow: 0 0 0 10px gold,0 0 0 20px green,0 0 0 30px red;
}
通过使用background-attachment:fixed
实现简单视差滚动效果。
background-attachment属性用于设置背景图片决定背景是在视口中固定的还是随包含它的区块滚动的。 而fixed属性值就是表示背景图片不随容器一起滚动,而是相对于视口固定。这样的话在我们向下滑动页面时,容器及其内容是向上滚动的,但其背景图片却是固定的,造成一种视差滚动的效果。
上代码:
<section>
You don't have to be great to start, but you have to start to be great.
</section>
<section>
what is your main focus today?
</section>
<section>
i'm liues
</section>
section{
/*用于控制每一个section的大小占据整个视口*/
width:100vw;
height:100vh;
color:#fff;
font-size:40px;
text-align:center;
/*背景图片相关属性设置*/
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
}
section:nth-child(1){
background-image:url(http://newfront.free4inno.com/dev/img/pic1.jpg);
}
section:nth-child(2){
background-image:url(http://newfront.free4inno.com/dev/img/pic2.jpg);
}
section:nth-child(3){
background-image:url(http://newfront.free4inno.com/dev/img/pic3.jpg);
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。