CSS常用样式

墨蓝 2022-04-08 08:59 379阅读 0赞

图片垂直居中

  1. .img-box {
  2.     height: 130px;
  3.     line-height:130px;
  4. }
  5.  img {
  6.     vertical-align: middle;
  7. }

垂直居中，不知道自己高度和父容器高度的情况下

  1. parentElement{
  2.     position:relative;
  3. }
  4. childElement{
  5.     position: absolute;
  6.     top: 50%;
  7.     transform: translateY(-50%);
  8. }

IE8背景半透明

  1. filter:alpha(opacity=60)

IE背景色渐变

  1. filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
  2. gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩

解决chrome浏览器input自动添加的颜色

  1. input:-webkit-autofill {
  2.     -webkit-box-shadow: 0 0 0px 1000px #1D2D40 inset;
  3.     -webkit-text-fill-color: #fff;
  4. }

背景图100%平铺

  1. html, body {
  2.    height: 100%\9;
  3.    min-height: 100%;
  4. }
  5. body {
  6.    background-image: url(/EnterpriserSchool/img/背景.jpg);
  7.    background-repeat: no-repeat;
  8.    background-size: 100% 100%;
  9.    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/EnterpriserSchool/img/背景.jpg', sizingMethod='scale');
  10. }

css不换行

  1. white-space:nowrap;    
  2. overflow:hidden;       
  3. text-overflow:ellipsis;

单选框自定义样式

  1. /*设置新样式*/
  2. input[type="radio"] + label::before {
  3.     content: "\a0"; 
  4.     display: inline-block;
  5.     vertical-align: middle;
  6.     width: 10px;
  7.     height: 10px;
  8.     margin-right: 6px;
  9.     border-radius: 50%;
  10.     border: 1px solid #cecfcc;
  11.     /*background-color: #017af5;*/
  12.     background-clip: content-box;
  13.     padding: 2px;
  14. }
  15. /*隐藏原来样式*/
  16. input[type="radio"] {
  17.     position: absolute;
  18.     clip: rect(0, 0, 0, 0);
  19. }
  20. /*选中样式*/
  21. input[type="radio"]:checked + label::before {
  22.     background-color: #017af5;
  23. }

文本框占位符颜色

  1. .sf-input::-webkit-input-placeholder {
  2.    color:#eee;
  3. }

发表评论

表情：
评论列表 （有 0 条评论，379人围观）

还没有评论，来说两句吧...

相关阅读

    相关 常用CSS样式重置

    在写项目的时候，我们经常需要对有些常用的样式进行重置，很多人为了涂方便使用\\{ margin: 0; padding: 0; \}；一般我都会引入一个自己写的样式重置的css

    柔情只为你懂柔情只为你懂/ 0 赞/ 408 阅读