CSS border属性--妙用

heartFollower 发布于2019-08-29 12:54 / 2963人阅读

摘要：在下实现圆角效果由于兼容性特别差，所以要在低版本浏览器下实现圆周角效果特别难利用的效果可实现如下图所示的圆效果代码简单如下制作三杠效果其实就是利用特性变色我们在做如下图标时，一般情况下时会有三处变色但是利用继承自这一特性

在ie下实现圆角效果

（由于border-radius兼容性特别差，所以要在ie低版本浏览器下实现圆周角效果特别难）
利用border-style的dotted效果可实现如下图所示的圆效果：

代码简单如下





    
    
    
    Document

制作三杠icon效果

其实就是利用border-style double特性

hover变色

我们在做如下图标时，

一般情况下hover时会有三处变色

但是利用border-color继承自color这一特性hover时可以只改一处，如下简便的写

利用透明边框使得图片定位容器右侧变得容易

一般background-position是距离左上角定位的，比方说我想要距离上边50px 左边40px，可以

background-position: 50px 40px;

但是如果想要让图片距离距离下边40px 右边50px 怎么办呢？

            border-right: 50px solid transparent;
            background-position: 100% 40px;

上面代码就实现了这个功能，主要原因是background-position是不把border计算在内的，所以100%......

制作三角效果

从最简单的看起

利用边框增加点击区域响应范围

利用border点击后有响应，再配合box-shadow可增加响应区域大小

实现两栏等高布局

        .box {
            border-left: 300px solid transparent;
        }
        .left {
            width: 300px;
            margin-left: -300px;
            float: left;
        }
        
    
        这里是左边栏内容
        
            不管我右边栏内容多高，两边都是等高的，而且没有任何浏览器兼容性问题

总结：
1）border-width不支持百分比，因为边框不会因为元素尺寸的变化而缩放，类似的outline、box-shadown、text-shadow......都是不支持百分比的
2）border-color、text-shadown、drop-shadown、outline等都是从color继承来的

云服务器 GPU云服务器 border属性 css属性访问CSS属性 position属性，css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112226.html

CSS3 border-radius妙用

摘要：分解出来就是以左上角为例子小例子属性允许您为元素添加圆角边框效果总结可以用画一些复杂的效果图，下面链接大神画的小猪佩奇，真是无所不能。 border-radius：左上右上右下左下（就是顺时针）如果没有4个值的情况下，缺的那个角的值与对角相等（如2、3、4） 1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;) 等价于...

andycall 2019-08-29 15:25 评论0 收藏0
CSS之FFC/GFC

摘要：全称翻译过来就是弹性格式化上下文。产生条件属性值设置为为或者的容器布局规则的布局规则在中也有详细定义，上可以找到详细说明，。通常弹性布局使用，二维网格布局使用。最后，所有的与也是一个，在遵循自己的规范的情况下，向下兼容规范。 FFC FFC全称Flex Formatting Contexts翻译过来就是弹性格式化上下文。 FFC产生条件 display属性值设置为flex或inline...

wemall 2019-08-29 17:29 评论0 收藏0
::before和::after伪元素的妙用

摘要：下面是伪元素和伪元素的具体用法和使用规则作用在标签前后添加字符串使用规则后面一定要用把要添加的内容括起来，否则是无法显示的括号不一定需要添加。场景：假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折磨人吗？这不是要我在...

番茄西红柿 2019-04-23 13:29 评论0 收藏0
web前端（11）—— 页面布局1

摘要：维护起来更加方便不足雪碧的最大问题是内存使用拼图维护比较麻烦使的编写变得困难雪碧调用的图片不能被打印我们可以使用综合属性制作通天，什么是通天呢，就是一般我们电脑的屏幕都是但是设计师给我们的图都会比这个大，那么我们可以此属性来制作通天。要说页面布局的话，那就必须说说margin，padding，和background。这三个属性其实都是前面讲过的，这里还是再次讲解以下，为什么呢？因为是这样的...

番茄西红柿 2019-04-23 13:11 评论0 收藏0
网站footer沉底效果的三种解决方案

摘要：沉底效果重点代码总结以上三种方法都属于没什么副作用的，其实实现这种沉底效果还有别的实现方式，但是对其他布局有影响，这里不赘述，之后有了更好的解决方案，再来更新。问题背景很多网站设计一般是两个部分，content + footer，content里面装的是网站主体内容，footer里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现下面两种情况：1.内容较少时，这个foot...

chanjarster 2019-08-26 13:57 评论0 收藏0