常用的css代碼有哪些

這篇文章主要介紹“常用的css代碼有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“常用的css代碼有哪些”文章能幫助大家解決問題。

　　封裝成mixin復用

　　在寫css的時候, 很多樣式都是很常用但是寫起來很麻煩, 雖然現在有很多成熟的ui框架, 但是我們也不能一個簡單的活動頁也引入那么大個框架吧?

　　在工作中我也攢下了不少常用css, 我把他們封裝成了mixin, 挑選了5個分享給大家, 希望大家喜歡.

　　溢出顯示省略號

　　參過參數可以只是單/多行.

　　/**

　　* 溢出省略號

　　* @param {Number} 行數

　　*/

　　@mixin ellipsis($rowCount: 1) {

　　@if $rowCount <=1 {

　　overflow: hidden;

　　text-overflow: ellipsis;

　　white-space: nowrap;

　　} @else {

　　min-width: 0;

　　overflow: hidden;

　　text-overflow: ellipsis;

　　display: -webkit-box;

　　-webkit-line-clamp: $rowCount;

　　-webkit-box-orient: vertical;

　　}

　　}

　　真.1px邊框

　　移動端由于像素密度比的問題, 實際的1px邊框看起來比較粗, 如果想要更"細"可以使用下面的代碼. 不同像素密度比的設備都可以兼容(pc/手機), 還支持任意數量圓角.

　　/**

　　* 真.1px邊框

　　* {List}: 多個方向邊框, 默認值為bottom, 你可以根據需要傳入(top, left, bottom, right) 4個方向;

　　* {Color} 邊框的顏色, 默認#ccc;

　　* {List} 4個圓角半徑, 默認0;

　　* {String} 一個高級設置, 一般都不需要改動, 由于細邊框的實現使用了css的偽類, 所以為了規避可能出現的樣式沖突, 我們可以自己指定使用:after還是:before, 默認after;

　　*/

　　@mixin thinBorder(

　　$directionMaps: bottom,

　　$color: #ccc,

　　$radius: (

　　0,

　　0,

　　0,

　　0

　　),

　　$position: after

　　) {

　　// 是否只有一個方向

　　$isOnlyOneDir: string==type-of($directionMaps);

　　@if ($isOnlyOneDir) {

　　$directionMaps: ($directionMaps);

　　}

　　@each $directionMap in $directionMaps {

　　border-#{$directionMap}: 1px solid $color;

　　}

　　// 判斷圓角是list還是number

　　@if (list==type-of($radius)) {

　　border-radius: nth($radius, 1)

　　nth($radius, 2)

　　nth($radius, 3)

　　nth($radius, 4);

　　} @else {

　　border-radius: $radius;

　　}

　　@media only screen and (-webkit-min-device-pixel-ratio: 2) {

　　& {

　　position: relative;

　　// 刪除1像素密度比下的邊框

　　@each $directionMap in $directionMaps {

　　border-#{$directionMap}: none;

　　}

　　}

　　&:#{$position} {

　　content: "";

　　position: absolute;

　　top: 0;

　　left: 0;

　　display: block;

　　width: 200%;

　　height: 200%;

　　transform: scale(0.5);

　　box-sizing: border-box;

　　padding: 1px;

　　transform-origin: 0 0;

　　pointer-events: none;

　　border: 0 solid $color;

　　@each $directionMap in $directionMaps {

　　border-#{$directionMap}-width: 1px;

　　}

　　// 判斷圓角是list還是number

　　@if (list==type-of($radius)) {

　　border-radius: nth($radius, 1) *

　　2

　　nth($radius, 2) *

　　2

　　nth($radius, 3) *

　　2

　　nth($radius, 4) *

　　2;

　　} @else {

　　border-radius: $radius * 2;

　　}

　　}

　　}

　　@media only screen and (-webkit-min-device-pixel-ratio: 3) {

　　&:#{$position} {

　　// 判斷圓角是list還是number

　　@if (list==type-of($radius)) {

　　border-radius: nth($radius, 1) *

　　3

　　nth($radius, 2) *

　　3

　　nth($radius, 3) *

　　3

　　nth($radius, 4) *

　　3;

　　} @else {

　　border-radius: $radius * 3;

　　}

　　width: 300%;

　　height: 300%;

　　transform: scale(0.3333);

　　}

　　}

　　}

　　等邊三角形

　　常用來做下拉菜單的方向指示, 如果你做的頁面就是個簡單的活動頁, 引入"餓了么"一類的ui就有些大材小用了, 借助"三角形"你可以自己做一個簡單的.

　　/**

　　* 等邊三角形

　　* @param {String} 尺寸

　　* @param {Color} 顏色

　　* @param {String} 方向

　　*/

　　@mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) {

　　width: 0;

　　height: 0;

　　border-style: solid;

　　@if (bottom==$dir) {

　　border-width: $size $size 0 $size;

　　border-color: $color transparent transparent transparent;

　　} @else if (top==$dir) {

　　border-width: 0 $size $size $size;

　　border-color: transparent transparent $color transparent;

　　} @else if (right==$dir) {

　　border-width: $size 0 $size $size;

　　border-color: transparent transparent transparent $color;

　　} @else if (left==$dir) {

　　border-width: $size $size $size 0;

　　border-color: transparent $color transparent transparent;

　　}

　　}

　　loading

　　這是一個"半圓邊框"旋轉的loading, 你可以根據業務需求自己指定圓的半徑.

　　@mixin loading-half-circle($width: 1em) {

　　display: inline-block;

　　height: $width;

　　width: $width;

　　border-radius: $width;

　　border-style: solid;

　　border-width: $width/10;

　　border-color: transparent currentColor transparent transparent;

　　animation: rotate 0.6s linear infinite;

　　vertical-align: middle;

　　}

　　棋盤

　　如果你做一些界面生成器工具(類易企秀)你會用到.

　　/**

　　* 棋盤背景

　　* @param {Color} 背景色

　　*/

　　@mixin bgChessboard($color: #aaa) {

　　background-image: linear-gradient(

　　45deg,

　　$color 25%,

　　transparent 25%,

　　transparent 75%,

　　$color 75%,

　　$color

　　),

　　linear-gradient(

　　45deg,

　　$color 26%,

　　transparent 26%,

　　transparent 74%,

　　$color 74%,

　　$color

　　);

　　background-size: 10vw 10vw;

　　background-position: 0 0, 5vw 5vw;

　　}

關于“常用的css代碼有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。