首页 > 作文

CSS使用伪类控制边框长度的方法

更新时间:2023-04-07 21:03:24 阅读: 评论:0

前言:

如图: 我们需要实现一个边框长度比容器长度小一些的边框时,以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果,并且使用起来很方便。

这里使用的是微信小程序编写的, 所以标签会是view,和html不冲突

html:

  <view class="swiper-tab">    <view class="swiper-tab-item {{currenttab=='1'?'active':''}}" data-current="1" bindtap="clicktab">安全帽监控</view>    <view class="swiper-tab-item {{currenttab=='2'?'active':''}}" data-current="2" bindtap="clicktab">危险区域监控</view>  </view>

css:

.swiper-tab {width: 100%;font-family: pingfangsc-medium;font-size: 28rpx;border-bottom: 2rpx solid #f1f1f1;text-align: center;height: 88rpx;line-height: 88rpx;display: flex;flex-fl前鼻韵母表ow: row;justify-content: space-between;background: #ffffff}.swiper-tab-item {width: 50%;color: #252627}.active {color: #4876f9;font-weight: bold;position: re金庸 武侠小说lative;}

上面都是页面的基础样式, 想要实现边框的长度控制, 就需要使用:after
伪类css:

.a禾富酒庄ctive:after {content: '';position: absolute;bottom: 0;height: 6rpx;width: 100rpx;backgro宋祖英和周杰伦und-color: #4876f9;left: 50%;    transform: translatex(-50%);}

最后两句是控制边框居中的问题。

到此这篇关于css使用伪类控制边框长度的文章就介绍到这了,更多相关css 边框长度内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以台湾成人dvd专卖店后多多支持www.887551.com!

本文发布于:2023-04-07 21:03:22,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/a2c5a6eb95d370a27b42ada729649f93.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:CSS使用伪类控制边框长度的方法.doc

本文 PDF 下载地址:CSS使用伪类控制边框长度的方法.pdf

标签:边框   长度   都是   鼻韵母
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图