分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

CSS之border

发布时间:2023-09-06 01:18责任编辑:傅花花关键词:CSS

1.border-width 不支持百分比

属性:thin:1px medium:3px(默认) thick:5px

2.border-style:double双线
实现三条横线分开
{
width:120px;height:120px;
border-top:60px double;
border-bottom:20px solid;
}

3.border-color与color
两者一样,
.add{
color:#ccc‘
transition:color .25s;
border:1px solid
}
.add:hover{
color:#06c
}
只在父元素上设置color就可以实现全部元素hover变色

4.border与background定位
(1)background-position默认相对左上方定位的
(2)利用border实现相对右边定位
{
border-right:50px solid transparent
background-position:100% 40px;
}

5.border与三角灯图形构建

.a{
width: 100px;
height: 100px;
border: 100px solid;
border-color: red green blue orange;
}

改变宽度和高度和border-color,可以实现不同形状的改变。

6.实现梯形

.a{
width: 600px;
border:100px solid;
border-color: transparent transparent #c00;
}

CSS之border

原文地址:http://www.cnblogs.com/chaofei/p/7688931.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved