asp.net 网站 结构,网站主题制作,建设网站的实验目的和意义,网站代码隐蔽代码在实现页面五花八门的有特色的ui时#xff0c;我们有时会遇到要用实现一个弧形#xff0c;而这样的弧形要怎么实现呢#xff1f;用图片#xff1f;不太优雅#xff0c;这样就要无故多加载一张图片了#xff0c;这里来说说怎么用css的after伪类来实现弧形。总思路#xf…在实现页面五花八门的有特色的ui时我们有时会遇到要用实现一个弧形而这样的弧形要怎么实现呢用图片不太优雅这样就要无故多加载一张图片了这里来说说怎么用css的after伪类来实现弧形。总思路写一个主元素并给该元素添加伪类来设置成圆取该圆的一部分来作为我们看到的圆弧。要点我们看到的圆弧实质是伪元素(圆)的一部分所以主元素应该是透明的颜色值设置在伪元素上既然是主元素和伪元素那么就应该主元素设置相对定位(relative)伪元素设置绝对定位(absolute)于主元素;伪元素宽度可以超过主元素这时最好让伪元素相对于主元素居中这样展现出来的圆弧才能左右对称如果伪元素宽度超过主元素需要设置主元素超出隐藏(overflow:hidden)这样才不会出现横向滚动条伪类可以设置成正圆(border-radius: 50%) 也可以是椭圆(border-radius: top right bottom left)既然是背景装饰可以把主元素的层级设置底一些(z-index: -1)具体实现:第一种(正圆弧)*{margin: 0;padding: 0;}.bg_arc{width: 100%;height: 400px;position: relative;z-index: -1;overflow: hidden;/*background: #ddd;*/}.bg_arc::after{content: ;display: block;width: 160%;height: 200%;border-radius: 50%;position: absolute;left: 50%;top: -100%;transform: translateX(-50%);background: #1677D2;}实现效果正圆弧参照上面的要点大概也能知道个原理了吧。看到的圆弧高度等于主元素高度伪元素绝对于主元素定位左右居中上移100%圆弧弧度取决于伪类的宽度这点放到这里来说是怕放在上面说反而让人觉得复杂了。如果还不理解的话可以把上面不必要的样式注释掉辅助理解:*{margin: 0;padding: 0;}.bg_arc{width: 100%;height: 400px;position: relative;/*z-index: -1;*//*overflow: hidden;*/background: #ddd;}.bg_arc::after{content: ;display: block;/*width: 120%;*/width: 100%;height: 200%;border-radius: 50%;position: absolute;/*left: 50%;*//*top: -100%;*//*transform: translateX(-50%);*/background: #1677D2;}效果辅助理解可以多调调高度宽度来帮助理解。第二种(有角度的弧)*{margin: 0;padding: 0;}.bg_arc{width: 100%;height: 400px;position: relative;z-index: -1;overflow: hidden;}.bg_arc::after{content: ;display: block;width: 100%;height: 400px;position: absolute; /* 不同点1 */left: 0;top: 0;border-radius: 0 0 50% 50%; /* 不同点2 */background: #fcc;}效果图角度弧实现角度弧的思路与正圆弧差不多不同地方是不同点1. 伪元素大小与主元素一样覆盖在主元素上不同点2. 设置伪元素的单个角度
