css重修之书(一):如何用css制作比1px更细的边框
如何用css制作比1px更细的边框
在项目的开发过程中,我们常常会使用到border:1px solid xxx,来对元素添加边框; 可是1px的border看起来还是粗了一些粗,不美观,那么有什么方法可以添加比1px更细的边框呢?这里我们可以用:before或者:after来解决:
1:设置横向的边框:
.my_content{
position:relative;
}
.my_content:before{
position: absolute;
right: 0;
top: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
我们给元素添加before伪类,设置content为空。接下来定位到你需要的方向,设置宽度为1px后,通过css3的scaleX(.5)将宽度为1px的内容缩小一半
2:设置纵向的边框:
.my_content2{
position:relative;
}
.my_content2:after{
position: absolute;
right: 0;
top: 0;
width: 1px;
height:100%;
content: '';
-webkit-transform: scale(0.5, 0.8);
transform: scale(0.5, 0.8);
background-color: #c8c7cc;
}
设置纵向的边框时,我们需要同时设置宽度和高度,然后在scale()方法里同时进行缩放。
css重修之书(一):如何用css制作比1px更细的边框的更多相关文章
- css 移动端1px更细
1.最近写项目经常遇到4个入口菜单放在一行,然后加border:1px 在移动端显示却很粗,如下图: <div class="header"> <div clas ...
- 如何用CSS实现在新窗口打开链接?
*如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标
一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用 background background:url(images/xx.png) 40px 10px n ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 如何用css实现一个三角形?
昨天被人问到说如何用css实现一个三角形?em.... 当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:
- 如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- CSS技巧分享:如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- 如何用CSS进行开发
翻译自:How to Develop with CSS 很多web开发人员都知道CSS,但是他们很可能认为使用CSS的应用代码就是这样的: <p> <span style=" ...
随机推荐
- 网站程序application, session, cookie区别的一点小总结
cookie:是存放于本地的文件,可以设置期限,一般来讲是比较小文本或键值对等,主要用于记录用户浏览信息,账号密码等等.可以让人们的登录变得方便,因为有了cookie,在一段时间内就可以自动登录以前所 ...
- RAID磁盘阵列的原理
RAID概念 磁盘阵列(Redundant Arrays of Independent Disks,RAID),有“独立磁盘构成的具有冗余能力的阵列”之意.磁盘阵列是由很多价格较便宜的磁盘,以硬件(R ...
- 20181.5IDEAx64位授权码
转载于:https://blog.csdn.net/q258523454/article/details/79775092 2DZ8RPRSBU-eyJsaWNlbnNlSWQiOiIyRFo4UlB ...
- php.ini修改后,重启无效
今天做项目,上传图,需要修改php.ini.发现修改后,多次长期服务器也没用,在网上找了好多方案.介绍一下我的流程 1.使用phpinfo()找到php.ini的位置,如果位置不准确,修改肯定没有任何 ...
- php源码建博客3--区分平台的MVC结构
主要: 模型单例工厂 目录结构优化 区分平台(前台,后台....) --------------文件结构:-------------------------------------- blog├─Ap ...
- 四则运算_EX
在原有四则运算基础上,除整数以外要支持真分数运算(验证正确性) 一次出的题避免相互重复 可定制出题数目 #include <stdio.h>#include <stdlib.h> ...
- ov5640介绍
1 摄像头 在各类信息中,图像含有最丰富的信息,作为机器视觉领域的核心部件,摄像头被广泛地应用在安防.探险以及车牌检测等场合.摄像头按输出信号的类型来看可以分为数字摄像头和模拟摄像头,按照摄像头图像传 ...
- 优步UBER司机全国各地奖励政策汇总 (2月1日-2月7日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 关于iOS和Android的安装包更新笔记
关于iOS和Android的安装包更新问题 1. Android更新apk 1)使用DownloadManager下载 2)使用HttpClient下载 apk的下载不能使用ssl,即不能使用http ...
- facebook原生广告添加adchoice图标
1.在需要显示adchoice的地方添加一个textview: <LinearLayout android:id="@+id/ad_ic_action" android:la ...