关于webkit CSS (CSS3)的小结

最新推荐文章于 2022-10-10 09:30:59 发布

转载最新推荐文章于 2022-10-10 09:30:59 发布 · 804 阅读

文章标签：

#css3

css3 同时被 2 个专栏收录

5 篇文章

订阅专栏

移动开发

4 篇文章

订阅专栏

本文深入探讨了CSS中用于创建动态视觉效果的关键属性，包括旋转、阴影、大小缩放、淡出效果以及按钮和搜索框的外观定制。此外，还介绍了如何实现水平滑动条和颜色渐变背景，为网页设计增添了丰富性和互动性。

-webkit-transform:rotate(5deg); 旋转

-webkit-box-shadow:5px 5px 5px #999; 阴影（默认为外阴影，inset为内阴影）

-webkit-transform:scale(0.5); 大小缩放

div{opacity:1;-webkit-transition:opacity 1s linear;}
div:hover{opacity:0;}; 淡出

input[type=range]{-webkit-appearance:slider-horizontal;} 水平滑动条

-webkit-appearance:push-button; 按钮
-webkit-appearance:searchfield; 搜索框

-webkit-box-sizing:border-box; padding的值包含在width里

-webkit-text-size-adjust:none; 禁用Webkit内核浏览器的文字大小调整功能

-webkit-tap-highlight-color:rgba(0,0,0,0); 只用于iOS (iPhone和iPad) 设置高亮色，alpha为0时禁用高亮

a{
    display:block;margin-top:.2em;color:#413F3F;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#e5e5e5),to(#c7c7c7));
    background-image:-webkit-linear-gradient(top,#e5e5e5,#c7c7c7);
    background-image:-moz-linear-gradient(top,#e5e5e5,#c7c7c7);
    background-image:-ms-linear-gradient(top,#e5e5e5,#c7c7c7);
    background-image:linear-gradient(top,#e5e5e5,#c7c7c7);
    background-color:#dfdfdf\9;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5',endColorstr='#c7c7c7');
}; 颜色渐变。