应用css打造自定select(非仿真模拟)完成基本原理及

日期:2021-03-10 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

完成基本原理很简易
1,应用appearance:none除去select的默认设置款式;
2,相互配合应用gradient、background-size,background-position,拼出自定的款式
我界定的款式和访问器默认设置得出的款式没多大区别,关键是简易完成1下,大伙儿能够充分发挥想像力做出绚丽多彩的select。

完成css以下

拷贝编码
编码以下:

select{
margin: 0;
padding: 0;
outline: none;
height: 25px;
line-height: 25px;
width: 120px;
border: rgb(191, 204, 220) 1px solid;
border-radius: 3px;
display: inline-block;
font: normal 12px/25px "微软雅黑", "SimSun", "宋体", "Arial";
background-size: 5px 5px,5px 5px,25px 25px,1px 25px;
background-color: #fff;
background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%),
repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%),
linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%),
repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%);
background-repeat: no-repeat;
background-position: 101px 10px,106px 10px,right top,92px top;
-webkit-appearance: none
}

对CSS把握的并不是很好,用的较为愚钝,还请大神指教。
http://www.smilce.com/?p=244
上一篇:提升对策之提升百度搜索排行 返回下一篇:没有了