常用的css代码有哪些

发布时间:2022-03-01 17:47:08 作者:iii
来源:亿速云 阅读:124

这篇文章主要介绍“常用的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代码有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. CSS常用样式有哪些
  2. HTML常用的代码有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:怎么使用CSS::selection伪元素

下一篇:怎么用css定位

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》