Molerose

Web生僻样式整理【时常更新】
做了1年多的web前端了,整理了一些比较生僻的样式,给自己留着看看,也好有个笔记,例如,滚动条美化,input手机...
扫描右侧二维码阅读全文
14
2018/06

Web生僻样式整理【时常更新】

做了1年多的web前端了,整理了一些比较生僻的样式,给自己留着看看,也好有个笔记,例如,滚动条美化,input手机端阴影,用户选择样式...

滚动条美化

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 10px;  
    height: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}  

输入框在手机端有阴影

input[type="text"] {
    -webkit-appearance: none;
}
textarea{
    -webkit-appearance: none;
}

用户选择时的样式

::selection
{
    color:#fff;
    background: #b6c2cc;
}

::-moz-selection
{
    color:#fff;
    background: #b6c2cc;
}

表格全局样式控制(CSS)

table {
    border: 1px solid #666666;
    border-spacing: 0;
    border-collapse: collapse;
}
table th,
table td {
    border: 1px solid #666666;
}
<table>
    <tr>
        <th>...</th>
    </tr>
    <tr>
        <td>...</td>
    </tr>
</table>

文字倒影(CSS)

.txt {
    -webkit-box-reflect: below -37px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(10%,transparent),to(hsla(0,0%,100%,.3)));
}

文字超出隐藏

.thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

图片垂直居中

.vcenter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    display: block;
    vertical-align: middle;
    text-align: center;
    margin: auto;
}
/* 父级请务必给 position:relative;且需使用padding-bottom来填充高度(百分比)! */

清除浮动,万能的float

/*方案一*/
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}
.clearfix{*+height:1%;}
/*方案二-bootstarp*/
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
/*方案三(源于国外)*/
.clearfix{ 
    overflow:auto;
    _height:1%
}
/*方案四(源于端友)*/
.clearfix{
    overflow:hidden;
    _zoom:1;
}
/*使用双伪元素清除浮动*/
.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
      zoom: 1;
}
/*比较严谨的一种做法*/
.clearfix:after {
  content:"";
  height:0;
  line-height:0;
  display:block;
  visibility:hidden;
  clear:both;
}
.clearfix {
  zoom:1;
}

CSS3属性-webkit-font-smoothing字体抗锯齿渲染

(1)Webkit在自己的引擎中支持了这一效果。

-webkit-font-smoothing它有三个属性值:

none:对低像素的文本比较好

subpixel-antialiased:默认值

antialiased:抗锯齿很好

(2)Gecko也推出了自己的抗锯齿效果的非标定义。

-moz-osx-font-smoothing: inherit | grayscale;这个属性也是更清晰的作用。

body {
  -webkit-font-smoothing: antialiased; /*chrome、safari*/
  -moz-osx-font-smoothing: grayscale;/*firefox*/
}

box-shadow

hover效果形成边框加投影

a:hover {
  -webkit-box-shadow: 0 0 0 1px #ff5c01, 0 2px 15px 0 rgba(251, 123, 51, 0.3);
  -moz-box-shadow: 0 0 0 1px #ff5c01, 0 2px 15px 0 rgba(251, 123, 51, 0.3);
  box-shadow: 0 0 0 1px #ff5c01, 0 2px 15px 0 rgba(251, 123, 51, 0.3);
}
Last modification:May 29th, 2019 at 11:36 am
If you think my article is useful to you, please feel free to appreciate

5 comments

  1. 一朵时光红

    可以好好学习一下样式!

  2. 一朵好时光红

    样式比较多,可以好好学习一下哦!

  3. 一朵好时光红

    星星之火可以燎原!

  4. 好时光荣

    都是很基础的样式的学习,只要多下点功夫就能学的会!

  5. 太阳黑子

    样式比较多哦!可以好好修订一下午!

Leave a Comment