css题目
转自css题目
1. 下面这个图形,只使用一个标签,可以有多少种实现方式:
假设我们的单标签是一个 div
:
<div></div>
定义如下通用CSS
:
div{
position:relative;
width:200px;
height:60px;
background:#ddd;
}
法一:border
这个应该是最最最容易想到的了
div{
border-left:5px solid deeppink;
}
法二:使用伪元素
一个标签,算上 before
与 after
伪元素,其实算是有三个标签,这也是很多单标签作图的基础,本题中,使用伪元素可以轻易完成。
div::after{
content:"";
width:5px;
height:60px;
position:absolute;
top:0;
left:0;
background:deeppink;
}
法三:外 box-shadow
盒阴影 box-shadow
大部分人都只是用了生成阴影,其实阴影可以有多重阴影,阴影不可以不虚化,这就需要去了解一下 box-shaodw
的每一个参数具体作用。使用 box-shaodw
解题:
div{
box-shadow:-5px 0px 0 0 deeppink;
}
法四:内 box-shadow
盒阴影还有一个参数 inset
,用于设置内阴影,也可以完成:
div{
box-shadow:inset 5px 0px 0 0 deeppink;
}
法五:drop-shadow
drop-shadow
是 CSS3 新增滤镜 filter
中的其中一个滤镜,也可以生成阴影,不过它的数值参数个数只有 3 个,比之 box-shadow 少一个。
div{
filter:drop-shadow(-5px 0 0 deeppink);
}
法六:渐变 linearGradient
灵活使用 CSS3 的渐变可以完成大量想不到的图形,CSS3 的渐变分为线性渐变和径向渐变,本题使用线性渐变,可以轻易解题:
div{
background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}
法七:轮廓 outline
这个用的比较少,outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。这个方法算是下下之选。
div{
height:50px;
outline:5px solid deeppink;
}
div{
position:absolute;
content:"";
top:-5px;
bottom:-5px;
right:-5px;
left:0;
background:#ddd;
}
法八: 滚动条
这个方法由 小火柴的蓝色理想 提供,通过改变滚动条样式实现:
div{
width:205px;
background:deeppink;
overflow-y:scroll;
}
div::-webkit-scrollbar{
width: 200px;
background-color:#ddd;
}
抛开实用性,仅仅是模拟出这个样式的话,这个方法真的让人眼前一亮。
上述就是想到的 8 种方法,不排除有没想到的,希望有其他的方法可以在评论中提出,具体 8 种实现可以戳这里看看:
2、类似下面这个图形,只使用一个标签,可以有多少种实现方式:
假设我们的单标签为 div
:
<div></div>
定义如下通用 CSS:
div{
position:relative;
width: 180px;
height: 180px;
}
这一题主要考查的是盒子模型 Box Model
与 背景 background
的关系,以及使用 background-clip
改变背景的填充方式。
background
在 Box Model
中,他是布满整个元素的盒子区域的,并不是从 padding
内部开始(也就是说从 border 就开始啦),只不过实线边框(solid)部分遮住了部分 background
,所以我们使用虚线边框(dashed)就可以看到背景色是从 border
内部开始的。
我们给 div
添加如下样式:
div{
background:#9c27b0;
border:20px dashed #2196f3;
}
但有一点需要注意,background-color
是从元素的边框左上角起到右下角止,而 background-image
却不一样,他是从 padding
边缘的左上角起而到 border
的右下角边缘止。
background image 的绘制中有两个因素决定了绘图区域:
-
background positioning area。
background-origin
属性决定了这个相对定位位置,默认为padding-box
。所以默认的背景图片绘制是从 padding box 的左上顶点开始的。 -
background painting area。
background-clip
属性决定了绘制区间,默认为border-box
。所以在background-repeat: repeat
的情况下:
The image is repeated in this direction as often as needed to cover the background painting area.
嗯,什么意思呢,你可以戳进这个 demo 看看,正常情况下的背景图填充如下:
当然,这个填充规则是可以通过 background-clip
改变的。
background-clip
设置元素的背景(背景图片或颜色)是否延伸到边框下面。
语法:
background-clip: border-box; // 背景延伸到边框外沿(但是在边框之下)
background-clip: padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
继续说回本题,接下来,只需要将中间部分填充为白色即可,这个用伪元素可以轻松完成,所以,其中一个方法如下:
div{
background:#9c27b0;
border:20px dashed #2196f3;
}
div::after{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:#fff;
}
法二:
上面的方法,我们使用了 div
的背景色默认情况下从 border
开始填充,及伪元素设置白色背景色填充 div
的中间的 padding-box
区域完成图形。
也可以反过来,使用伪元素背景色从 border-box
开始填充,使用 div
的背景色填充中间 padding-box
区域。
div{
background:#fff;
background-clip:padding-box;
border:20px dashed #cccc99;
}
div::before{
content:"";
position:absolute;
top:-20px;
left:-20px;
bottom:-20px;
right:-20px;
background:#996699;
z-index:-1;
}
具体的 Demo 戳这里 。
上面 法二
除了用到了 background-clip
改变背景的填充区域,还用到了 z-index
触发元素生成了堆叠上下文(stacking context),改变了元素的层叠顺序(stacking levle),让伪元素背景色
叠到了 div 背景色
之下,这两个概念下题会提及。
法....
本题主要是想讨论一下 CSS 的盒子模型 Box Model
与 背景 background
的关系,其实本题就是在于一个 dashed 边框,内部使用颜色填充即可,与上面第一题异曲同工,使用阴影、渐变都可以完成,感兴趣可以自己尝试一下其他解法。