标签:and 一个 分享图片 ott present aced span bottom 元素
textarea
默认有个resize
样式,效果就是下面这样
读 《css 揭秘》时发现两个亮点:
textarea
元素,适用于下面所有元素:elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
resize
功能,但是其他元素不行。这一点,可能不太好理解,举个例子,我们用一个span
来覆盖右下角的按钮
<div>
div
<span>
span
</span>
</div>
div {
width:100px;
height:100px;
background-color:pink;
resize:horizontal;
overflow:hidden;
position:relative;
}
span {
content:‘‘;
display:block;
width:20px;
height:20px;
background-color:yellowgreen;
position:absolute;
right:0;
bottom:0;
}
效果是这样,resize
功能失效了:
但是,如果把 span
换成伪元素,就是可以的:
<div>
div
<span>
span
</span>
</div>
div {
width:100px;
height:100px;
background-color:pink;
resize:horizontal;
overflow:hidden;
position:relative;
}
div::after {
content:‘‘;
display:block;
width:20px;
height:20px;
background-color:yellowgreen;
position:absolute;
right:0;
bottom:0;
}
resize
功能还是在的:
这就非常神奇了。
标签:and 一个 分享图片 ott present aced span bottom 元素
原文地址:https://www.cnblogs.com/xianshenglu/p/8998662.html