前端-css美化小技巧

作者: 南土酱 | 来源:发表于2022-10-31 17:48 被阅读0次

前端-css美化小技巧
前端css 小技巧
CSS教程汇总
快捷路径
前端css布局小技巧
前端常用CSS小技巧
简单介绍CSS布局和技巧
如何能提高CSS编写技巧提高Web前端开发效率
前端技巧总结1——css篇
通过 CSS 美化浏览器自带的 radio，CheckBox 属

部分技巧的原文链接:
https://mp.weixin.qq.com/s/0N77sz8Rzb1XSqxMSh_1LQ

input美化🍔🍔

设置input 的placeholder的字体样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  
    color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
input:-moz-placeholder { /* Firefox 18- */
    color: red;
}
<input type="text" placeholder="请设置用户名">

设置input 聚焦时的样式

input:focus{
background-color:red;
}

取消input的边框

border: none;
outline: none;

文本的美化🍔🍔

文本超出使用省略号

// 单行文本出现省略号
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;

// 多行文本出现省略号
display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
-webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
line-clamp: 3;
word-break: break-all;
overflow: hidden;
max-width: 100%;

边距的技巧:🍔🍔

负边距去除空白

border-left:6px solid #fff;
///
  margin-left:-6px;

绝对定位的用法:🍔🍔

定位设置行内元素为块状元素

span{
  border:1px solid red;
  position: absolute;
  left:0;
  right:0;
 
   /* 等同于设置  width:100%;display:block */
}

兄弟选择器的使用🍔🍔

li+li 实现列表边框不重叠

ul{
  width: 500px;
   margin:auto;
   list-style: none;
   padding:0;
   border:1px solid red;
   text-align: center;
 }
li+li{
   border-top:1px solid red;
 }

outline🍔🍔

实现边框变色

li {
    padding: 10px;
    border: 10px solid pink;
    outline-offset: -10px;
  }
  li+li{
    margin-top:-10px;
  }
  li:hover{
    /* border:10px solid gold; */
    outline:10px solid gold;
  }

滚动条更改🍔🍔

.scroll-container::-webkit-scrollbar-corner,
   /* 滚动条角落 */
 .scroll-container::-webkit-scrollbar-thumb,
 .scroll-container::-webkit-scrollbar-track {      /*滚动条的轨道*/
   border-radius: 4px;
 }
 
 .scroll-container::-webkit-scrollbar-corner,
 .scroll-container::-webkit-scrollbar-track {
   /* 滚动条轨道 */
   background-color: rgba(180, 160, 120, 0.1);
   box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
 }
 
 .scroll-container::-webkit-scrollbar-thumb {
   /* 滚动条手柄 */
   background-color: #00adb5;
 }

css3美化🍔🍔

绘制三角形

/* 正三角 */
.up-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent rgb(245, 129, 127) transparent;
 }
.down-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 40px 25px 0 25px;
   border-color:  rgb(245, 129, 127) transparent transparent transparent;
 }

制作虚线框

.dotted-line {
  width: 800px;
  margin: auto;
  padding: 20px;
  border: 1px dashed transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);
}

优惠卷效果


.coupon {
 width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
  radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
  radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
  radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}
.coupon span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: red;
  font-size: 50px;
  font-weight: 400;
}
<p class="coupon">
 <span>200</span>优惠券
</p>

图片内部文字阴影

//一般使用 box-shadow会造成阴影在图片外部
<img class="drop-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="drop-shadow example (transparent)">
//其遵循给给定图片的 Alpha 通道
.drop-shadow {
  filter: drop-shadow(2px 4px 8px #3723a1);
}
原文链接:https://mp.weixin.qq.com/s/0N77sz8Rzb1XSqxMSh_1LQ

改变光标

.card-image-cursor {
  background-color: #D11A5A;
  cursor: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ac1d8cb2b1b46a384e986a7461df26a~tplv-k3u1fbpfcp-watermark.image?"), auto;
}

.card-emoji-cursor {
  background-color: #D29B22;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='48' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto;
}

用attr() 展示 tooltip 类似功能

CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，
并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素
<span class="tooltip" tooltip-data="Tooltip Content">Here</span>
.tooltip:before {
//获取内容
  content: attr(tooltip-data); 
//  其他css 文本属性
}

css3 实现tab切换
css 实现tab 卡片切换多种方式 - 简书 (jianshu.com)
css3 实现滚动导航栏阴影效果

css->
header{
  position: sticky;
  background: #fff;
  top: 0;
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
shadow::before{
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed;
  width: 100%;
}
shadow::after{
  content: '';
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
  position: absolute;
}
html-->
<header>LOGO</header>
<shadow></shadow>
<main>很多内容文本</main>

原文出处:
https://mp.weixin.qq.com/s/aDJp-Vk2wsYRRFu7O8hkFg

css3 平滑滚动

这里利用 锚点 和 scroll-behavior 来实现
html {
  scroll-behavior: smooth;
}
<a id="top" href="#bottom">点击平滑滚动到底部
多个<li>xxx</li>
 <a  id="bottom" href="#top">点平滑滚动到顶部

幻灯片轮播图滑动

html->
<main class="slides">
  <section class="section-1">
    <h2>向右滑动 >>></h2>
  </section>
  <section class="section-2">
    <h3>再滑 >>></h3>
  </section>
  <section class="section-3">
    <h2>再滑 >>></h2>
  </section>
  <section class="section-4">
    <h3>不用JavaScript啦</h3>
  </section>
</main>
css->
.slides {
  /* We set the scroll snapping */
  scroll-snap-type: x mandatory;
  /* Necessary for mobile scrolling */
  -webkit-overflow-scrolling: touch;
  /* For layout purposes */
  display: flex;
  /* To allow horizontal scrolling */
  overflow-x: scroll;
}

section {
  /* For styling purposes */
  height: 100vh;
  min-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Set where the snapping should happen */
  scroll-snap-align: start;
}