Css是一门功能强大、生态完整的复杂语言。它有很多技巧,但是我们在生活和工作中可能没有接触到它,包括一些实用的技巧。在这里,我特地罗列了一些CSS中可以忽略的小知识,希望对大家有所帮助。1、椭圆的实现与圆形相同。这里也用到了border-radius属性,但是你可能不知道border-radius是一个简写属性。border-radius可以分别设置四个角的水平和垂直半径,只要使用正斜杠即可。指定斜线前的前四个值作为各自的水平半径,指定斜线后的最后四个值作为各自的垂直半径(可以缩写)。因此,可以用如下代码实现一个椭圆:div{width:200px;高度:300px;边框:1px实心#000;边框半径:150px/100px;}
这样可以直接得到一个椭圆。其实它也支持百分比值,所以border-radius属性部分的代码也可以简化成这样:border-radius:50%;如果你只需要在上半部分实现一个半椭圆怎么办?从前面的结论来看,其实我们可以很容易的写出半椭圆的border-radius属性部分的CSS代码:border-radius:50%/100%100%00;这相当于:border-radius:50%50%50%50%/100%100%00;结果如下:2.绝对定位和固定定位元素可以通过同时设置bottom&top或者left&right的值来间接设置元素的宽度。代码如下:.parent{position:relative;边框:1px红色虚线;高度:100px;宽度:100px;}.child{位置:绝对;底部:10px;高度:10px;左:10px;右:10px;background:gray;