感谢chokcoco大佬,原来版本是”左边竖条“。
题目和解题思路来源:http://www.cnblogs.com/coco1s/p/5893921.html
主要记录通过这个题目而恶补的css属性们。
题目1:下面这个图形,只使用一个标签,可以有多少种实现方式:
第一种情况:使用border
#div1 {
background: #ddd;
width: 200px;
height: 60px;
margin-top: 10px;
border-right: 5px solid deepskyblue;
}
因为初始化时没有设置box-sizing:border-box,所以默认还是content-box。这里用到的知识点是W3C盒模型。
第二种情况:使用box-shadow
#div1 {
background: #ddd;
width: 200px;
height: 60px;
margin-top: 10px;
box-shadow: 5px 0 0 0 deepskyblue;
}
①box-shadow定义
box-shadow用来设置box(盒子)的shadow(阴影),这里的重点是盒子的阴影,他会将所有的东西看成一个盒子,给予这个整体阴影。谈到这一点不得不讲一下与他形成鲜明对比的drop-shadow,drop-shadow是真实世界的投影,中间没东西的话会暴露出投影。
举个梨子:
#div1 {
width: 200px;
height: 80px;
border: 5px dashed deeppink;
margin: 50px;
box-shadow: 10px 10px 0 0 black;
}
#div2 {
width: 200px;
height: 80px;
border: 5px dashed deeppink;
margin: 50px;
filter: drop-shadow(10px 10px 0 black);
}
②box-shadow值
box-shadow:x偏移 y偏移 模糊大小 阴影大小 颜色 内/外
<1>模糊大小和阴影大小的区别
模糊大小的效果是一个圆,你设定的数越大它越扩散(扩散半径越大);
而阴影大小的效果类似border,你设定的值类似border-width。
#div1 {
width: 80px;
height: 80px;
margin: 150px;
box-shadow: 0px 0px 50px 0 black;
}
#div2 {
width: 80px;
height: 80px;
margin: 150px;
box-shadow: 0px 0px 0 50px black;
}
<2>内/外阴影 inset
外阴影:从右开始是正,左为负;内阴影:从左开始是正,右是负。所以这个图是阴影在外我们选择外阴影。
第三种情况:使用filter:drop-shadow
#div1 {
background: #ddd;
width: 200px;
height: 60px;
margin-top: 10px;
filter: drop-shadow(5px 0 0 deepskyblue);
}
做个比较:
filter:drop-shadow的值只有: x偏移 y偏移 模糊大小 颜色(相比box-shadow少了阴影大小和内/外)。
filter:drop-shadow阴影不能叠加,而box-shadow阴影可叠加。
filter:drop-shadow阴影相比box-shadow颜色淡一些。
第四种情况:使用outline
#div1 {
outline: 5px solid deepskyblue;
background: #ddd;
width: 195px;
height: 50px;
position: relative;
}
#div1::after {
content: "";
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: 0;
background: #ddd;
}
单纯只用outline: 5px solid deepskyblue,会出现border的效果,使用上也差不多。
看网上很多人说:outline 不会象border那样影响元素的尺寸或者位置。
但现在我还不明白这句话的意思,border什么时候会影响元素的尺寸或位置呢?
第五种情况:利用scrollbar
#div1 {
background: #ddd;
width: 205px;
height: 60px;
margin-top: 10px;
overflow-y: scroll;
}
#div1::-webkit-scrollbar {
width: 5px;
background: deepskyblue;
}
-webkit-scrollbar自定义滚动条样式,注意一定要overflow-y:scroll
----------------------------------------------------------一条分割线----------------------------------------------------------
题目2:下面这个图形,只使用一个标签,可以有多少种实现方式:
第一种情况:使用::after ::before伪元素
#div1 {
background: #ddd;
width: 200px;
height: 60px;
margin-top: 10px;
position: relative;
}
#div1::before {
position: absolute;
top: 0px;
right: 0px;
width: 5px;
height: 60px;
content: "";
background: deepskyblue;
}
在我个人看来无论你写after还是before都是可以的,只要你定义好了top left啥的,不知道这个地方我理解的有没有错误,欢迎大家指正。
因为定义的蓝色竖条在右边,必须采用position:absolute绝对定位(div要设置成relative相对定位),绝对定位的伪元素会跟着相对定位的元素走,否则它就要相对于下一个相对定位的父元素了!如果蓝竖条在左边,我们可以使用display:block,因为伪元素默认是行内元素,所以不能给它定宽高。
第二种情况:使用box-shadow inset
#div1 {
background: #ddd;
width: 200px;
height: 60px;
margin-top: 10px;
box-shadow: -5px 0 0 0 deepskyblue inset;
}
就不多解释了,上面已经解释差不多了。
第三种情况:使用linear-gradient
#div1 {
background: #ddd;
width: 200px;
height: 60px;
margin-top: 10px;
background-image: linear-gradient(270deg,deepskyblue 0px, deepskyblue 5px, transparent 5px);
}
linear-gradient 线性渐变
注意一定要写background-image不能写background,否则会把上面的background:#ddd盖掉。
值:angle,color position,color position… (color position又名color-stop)
angle就是颜色渐变的方向,不加浏览器私有前缀时,用一张图表明angle:
加了私有前缀方向的话,需要在原先angle的基础上加90°!!!
linear-gradient是css3新加的方法,是背景的新方式,能够代替图片所以可以加快页面载入时间,并且因为是浏览器直接生成所以缩放效果好。
使用linear-gradient生成一个网格背景:
.stripe {
width: 250px;
height: 150px;
margin: 50px;
background: linear-gradient(90deg, gray, gray 50%, transparent 50%, transparent),
linear-gradient(gray, gray 50%, transparent 50%, transparent);
background-size: 30px 30px;
}
此处最重要的反而是background-size了,因为我们实际上只画了30px×30px的小格子:
但是通过background-repeat的默认值:background-repeat:repeat自动将背景x、y方向重复。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
上图我直接将颜色设为了gray,但如果原本只能提供彩色,却需要咱们呈现灰色咋办呢?一个真实的场景,寿光的“人祸”新闻我们需要将背景弄成一种严肃的气氛,一键灰色如何用css3实现呢?
filter: grayscale(1);
css3提供了很多强大功能,比如filter,那我们来复习下filter都有哪些特性吧(o゜▽゜)o☆
1.sepia 墨鱼汁色
filter: sepia(80%);
2.saturate 饱和度
filter: saturate(50%);
当饱和度为0%时相当于灰度图grayscale(1)
3.hue-rotate 色彩反转
先看效果(我觉得这个滤镜最美~
他的写法略有不同!
filter: hue-rotate(330deg);
下面是色轮:
4.invert 反转
filter: invert(1);
本属性很适宜下面这个图:
5.opacity 透明度
filter: opacity(50%);
6.brightness 亮度
filter: brightness(2);
7.contrast 对比度
filter: contrast(2);
8.blur 模糊
filter: blur(2px);
当然还要加上我们之前提到过的drop-shadow,共10种。
第四种情况:利用scrollbar
在上一个问题的基础上把宽度减小即可~
#div1 {
background: #ddd;
width: 205px;
height: 60px;
margin-top: 10px;
overflow-y: scroll;
}
#div1::-webkit-scrollbar {
width: 5px;
background: deepskyblue;
}