css 完美替换图片
1.css替换简单图标的展示方法
.box1 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:10px;border-right:6px solid transparent;border-top:50px solid #f00} .box2 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:100px;border-right:50px solid transparent;border-top:10px solid #ddd} .box21 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:111px;top:100px;border-right:50px solid #ddd;border-bottom:50px solid transparent} .box3 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:200px;border:10px solid #000;border-color:transparent transparent transparent #f00} .box4 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:300px;border:10px solid #000;border-color:transparent transparent #f00 transparent} .box5 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:400px;border:10px solid #000;border-bottom:10px solid transparent} .box6 span, .box6 span i{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:500px;border:8px solid #000;border-color:transparent transparent #000 transparent} .box6 span i{left:-7px;top:-6px;border:7px solid #fff;border-color:transparent transparent #fff transparent} .box7 span, .box7 span i{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:600px;border:50px solid #f00;border-color:transparent transparent transparent #f00} .box7 span i{left:-50px;top:-30px;border:30px solid #fff;border-color:transparent transparent transparent #fff}
</style>
<body> <div class="box1 box2 box3 box4 box5"> <span></span> </div> <div class="box6 box7"> <span><i></i></span> </div>
2.css3 新方法的代码和效果
1)border-radius:
<div id="divone"></div>
1 2 3 4 5 6 | #divone{ width : 200px ; height : 200px ; border : 1px solid red ; border-radius: 15px ; } |
可以写为 : -moz-border-radius
-webkit-border-radius:
#divone{ width: 200px; height: 200px; border: 1px solid red; border-radius:0px 15px 25px 45px; }
border-radius:1 2 3 4 分别代表的是左上角 右上角 右下角 左下角
2)box-shadow 只有chrome 和 safair 支持这个阴影的效果
#divone{ width: 200px; height: 200px; border: 1px solid #000; background:#fff; box-shadow:13px -11px 10px #333; }
box-shadow:1 2 3 4 分别代表的值是 阴影左边的距离, 阴影右边的距离 ,阴影清晰度 颜色
3)resize overflow
#divone{ width: 100px; height: 100px; border: 1px solid #000; resize: both; overflow: auto; }
4)css 多栏布局
-webkit-column-count:4
-webkit-column-gap:20px;
column-count: 栏数 column-width:栏宽 column-gap:各栏之间的空白间隔 如果没有设定column-count:在允许宽范围内尽可能多的增加栏目
#divone{ -webkit-column-count : 4; -webkit-column-gap : 20px; -moz-column-count : 4; -moz-column-gap : 20px; column-rule: 1px solid #00000; }
5) word-wrap:属性是用来防止太长的字符串溢出,可以用两个属性值 normal 和 break-word
normal 是默认的只允许在断电截断文字,break-word 文字可以在任何需要的地方截断匹配分配的空间并防止溢出
6)媒体查询
@media all and(max-width:480px){ #divdone{width:400px;height:400px;backgroundL:red} }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee