摘要:在此,特地列举一些里比较容被忽略的小知识,希望能对你有所帮助。椭圆的实现跟圆形的实现一样,这里也是用到属性,但是你可能不知道,是一个简写属性,可以多带带为四个角分别设置水平和垂直半径,只要用到一个正斜杠即可。
css是一门功能强大、具备完整生态的复杂语言。它拥有很多的技巧, 但是生活工作中我们可能不怎么会接触到,这包括一些实际上挺实用的技巧。在此,特地列举一些css里比较容被忽略的小知识,希望能对你有所帮助。1. 椭圆的实现
跟圆形的实现一样,这里也是用到border-radius属性,但是你可能不知道,border-radius是一个简写属性, border-radius可以多带带为四个角分别设置水平和垂直半径,只要用到一个正斜杠即可。在斜杠前指定前四个值,作为各自的水平半径,在斜杠后指定后四个值作为各自的垂直半径(可以简写)。故椭圆可以如下的代码实现:
div { width: 200px; height: 300px; border: 1px solid #000; border-radius: 150px / 100px; }
这样子可以直接得到一个椭圆。实际上,它还支持百分比值,所以border-radius属性部分的代码还可以简化成这样子:
border-radius: 50%;
那如果仅需要实现一个上面部分的半椭圆呢?由前面的结论,实际上我们可以很容易地写出半椭圆的border-radius属性部分的css代码:
border-radius: 50% / 100% 100% 0 0;
这等价于:
border-radius: 50% 50% 50% 50% / 100% 100% 0 0;
结果如下:
2. 绝对定位和固定定位的元素可通过同时设置bottom&top或者left&right的值,来间接地设置该元素的宽度代码如下:
.parent { position: relative; border: 1px dashed red; height: 100px; width: 100px; } .child { position: absolute; bottom: 10px; height: 10px; left: 10px; right: 10px; background: gray; }
结果如下:
实际上,就算在父元素的宽高不是直接指定、而是由其内嵌的内容撑起来的情况下,也可以生效。
3. 一般情况下固定定位的父元素,无论其层级设置得多高且无论其内嵌的子元素的层级设置得多低,该元素都不能将这些子元素覆盖老规矩,上代码示例:
.parent { position: fixed; z-index: 999; background: red; height: 100px; width: 100px; } .child { position: relative; z-index: -999; width: 50px; height: 50px; background: gray; }
老规矩,贴结果图:
4. 运用currentColorcurrentColor是一个比较特殊的属性,它是css的第一个变量。顾名思义,它并没有绑定具体的颜色值,而是在使用中被解析为color。例如以下的水平分割线的颜色值:
div { color: red; border: 1px solid red; } hr { height: .5em; background: currentColor; }
My First Heading
My first paragraph.
结果如下,水平分割线成功被赋予了同样的颜色值:
5. 利用flexbox和外边距实现垂直水平居中实现一个元素垂直水平居中的方法有很多,但是以下这种算是比较好的一种方法,十分简捷。
只需在父类和子类分别加上这两个属性:
.parent { display: flex; } .child { margin: auto; }
即可实现子元素垂直水平居中。
6. 绝对定位的元素设置为行内元素时不会生效不少人以为绝对定位的元素可以随便设置其display属性,实际上,绝对定位的元素会形成一个块级框,它无法被设置为一个行内元素。你可以对一个元素同时设置以下样式试试效果:
div { display: inline; position: absolute; width: 200px; height: 200px; background: red; }
会发现,给他设置的宽高依旧会生效。这已经说明了问题。
7. 更好地实现文本两端对齐的效果相信一些人可能会在相应的样式类中设置如下属性:
text-align: justify;
但这里的效果是不好的,容易造成单词间间距过大的现象,影响阅读。
我们可以仅仅在相应的样式类中设置如下属性,达到期待中的效果:
hyphens: auto;
它会在末尾进行单词的断层,大大缩短了单词间的过大间距。
8. 实现波浪形下划线我们将借助background这个简写属性来实现它。可先试着写如下代码:
p { font-size: 30px; display: inline; background: linear-gradient(red 0 100%) no-repeat; background-size: 100% 1px; background-position: 0 85%; }
This is my first paragraph. This is my first paragraph. This is my first paragraph.
会看到结果如下:
这并不是我们想要的结果。首先它穿过了字形的descender。我们应该让下划线在遇到字母时自动断开,那样子的效果将会更加舒服。可以巧妙地利用text-shadow属性实现这一步,在上面的样式类里加上这样一个属性段:
text-shadow: 2px 0 white, -2px 0 white;
结果如下所示:
可看到效果变成了这样:
怎样实现类似文本输入纠错时的波浪型下划线?这里需要用到两层渐变,最终的代码如下:
p { font-size: 30px; display: inline; background: linear-gradient(-45deg, transparent 40%, red, red 60%, transparent 0) 0 1em, linear-gradient(45deg, transparent 40%, red, red 60%, transparent 0) .1em 1em; background-repeat: repeat-x; background-size: .2em .1em; text-shadow: 2px 0 white, -2px 0 white; }
实现的效果如下:
附: 部分内容源自Lea Verou大神的《CSS揭秘》一书。
原文链接
【作者简介】 TRIS,芦苇科技web前端开发工程师,喜欢唱歌、看动漫、看小说。擅长微信小程序开发,系统管理后台。访问www.talkmnoney.cn了解更多。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116190.html
摘要:半路出家的前端程序员应该不在少数,我也是其中之一。年,冯冯同事兼师兄看我写太费劲,跟我说对面楼在找,问我要不要学,说出来可能有点丢人,但是在那之前,我真得不知道什么是,什么是。 半路出家的前端程序员应该不在少数,我也是其中之一。 为何会走向前端 非计算机专业的我,毕业之后,就职于一家电力行业公司,做过设备调试、部门助理、测试,也写过一段时间的QT,那三年的时间,最难过的不是工作忙不忙,...
摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...
摘要:张鑫旭老师的文章写的很棒,解决了我的许多困惑。所以,基础知识的牢固就显得尤为重要是个不怎么听话的孩子,总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑,钻研的魔法,可见其中技术细节有多复杂。 从实习算起,到现在工作了也有一年半的时间了,在这期间,深深感受到了前端领域的飞速发展,在这里记录一下自己的成长历程,算是对知识的一个梳理,也希望帮助到刚入行的同学们。说来惭愧,大学里并没有涉...
摘要:张鑫旭老师的文章写的很棒,解决了我的许多困惑。所以,基础知识的牢固就显得尤为重要是个不怎么听话的孩子,总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑,钻研的魔法,可见其中技术细节有多复杂。 从实习算起,到现在工作了也有一年半的时间了,在这期间,深深感受到了前端领域的飞速发展,在这里记录一下自己的成长历程,算是对知识的一个梳理,也希望帮助到刚入行的同学们。说来惭愧,大学里并没有涉...
摘要:如果你并不是一个特别有经验的程序员,我相信你未必知道属性除了能用在文本显示,还可以用作其它地方。说实话,估计这个值很少人会使用它,但你要知道确实可以使用这样的一个值,如果以前不知道它,那么,现在,在有些罕见的地方,你也许就会变得聪明一点了。 虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1...
阅读 600·2021-11-24 09:39
阅读 3448·2019-08-30 15:53
阅读 2472·2019-08-30 15:44
阅读 3212·2019-08-30 12:54
阅读 2181·2019-08-29 12:23
阅读 3265·2019-08-26 14:05
阅读 2052·2019-08-26 13:36
阅读 3387·2019-08-26 13:33