CSS3中的渐变和圆角
渐变:
backgroud:linear-gradient()
语法:linear-gradient(起点,开始颜色,结束颜色);
起点:top,right,bottom,left,top left,top right, bottom left,bottom right,
例:
1 2 3 4 5 6 7 8 9 | .test{ background :-moz-linear-gradient( top , #fff , #000 ); background :-webkit-linear-gradient( top , #fff , #000 ); background :-ms-linear-gradient( top , #fff , #000 ); //IE 9 以上版本才支持; background :-o-linear-gradient( top , #fff , #000 ); background :linear-gradient( top , #fff , #000 ); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #fff, endColorstr = #000)" ; //IE 8.0 版本可以识别; + background : #ccc ; //针对IE 6 IE 7 设置纯色背景色; } |
圆角效果:
border-radius:20px 10px 5px 0; //顺时针四个角的圆角值;IE6、IE7、IE8不支持圆角效果;
正圆:border-radius:50%;
阴影效果:
box-shadow:3px 3px 2px #CCC; x偏移,y偏移,扩散值, 颜色值
关于背景图的维护:
1、不要把所有的背景图都放在一张图片上,根据功能性进行大类划分,然后把功能相似的图标、背景图放在一张图片上。
2、使用background-position进行精确定位,需要注意各图片的上下距离,留好足够的空间。
1 2 3 4 | .bg_sprite{background-image:url(); background-repeat:no-repeat} #ico1 {width:宽度;height:高度;background-position:X坐标 Y坐标} #ico2 {width:宽度;height:高度;background-position:X坐标 Y坐标} #ico3 {width:宽度;height:高度;background-position:X坐标 Y坐标} |
分类:
CSS
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 本地部署 DeepSeek:小白也能轻松搞定!
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)