CSS布局
css布局;css3;css计算
星辰啊大海7857
这个作者很懒,什么都没留下…
展开
-
为什么last-child有时候不起作用
last-child是这样匹配的:第一步,查找item-service下的所有元素:span\span\div第二步,在上述元素中查找最后一个元素:div第三步,验证最后一个元素是否与选择器 span 匹配:不匹配,此样式失效所以如果我用last-child就是匹配不出来的,要用last-of-type.item-service{ span { border-right: 1px solid #ccc; } span:last-of-type{原创 2020-05-29 16:55:52 · 1080 阅读 · 0 评论 -
calc()函数
div的高度height为calc(100vh)即可,100vh= 视窗高度的100% div { width: 100%; height: calc(100vh); } 需要注意的是,该方法适合于网页高度等于当前屏幕视窗高度,按实际需求可能还是需要JS的。...原创 2020-05-22 14:09:04 · 963 阅读 · 0 评论 -
用纯css画一个三角形
将div的宽高都设置为0,即可利用border来实现。下面是向上的三角:width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 60px solid #e60012;下面是向下的三角:width: 0;height: 0;border-left: 30px solid transparent;border-right:原创 2020-05-16 18:58:46 · 176 阅读 · 0 评论 -
css设置渐变
一、背景色渐变:background-image: linear-gradient(45deg, #1a9ad0, #42c1be, #2c7c67, #2d63f9);background-image: linear-gradient(角度,颜色)二、边框颜色渐变border-image: linear-gradient(#e60012,#000) 30 30;纵向渐变这时如果后面没有跟30, 30,会变成这样:(为方便查看,我将边框宽度换成50px了)如果想要横原创 2020-05-11 15:14:42 · 379 阅读 · 0 评论 -
父组件的css如何作用到子组件中
待补充原创 2020-04-10 09:21:28 · 532 阅读 · 0 评论 -
vue中对style样式的区别
lang="scss"原创 2020-04-10 09:01:21 · 457 阅读 · 0 评论 -
前端今日需求,所有页面变成灰色
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */filter: grayscale(100%);参考:https://www.runoob.com/cssref/css3-pr-filter.html原创 2020-04-07 16:18:08 · 262 阅读 · 0 评论