那些年你被哪些样式需求伤害过？

分手后的思念是犯贱 2022-09-11 00:09 8阅读 0赞

自从做了前端开发这个工作后，你是否时不时收到PM产品经理的各种恶心你的样式？没有？那你公司的PM肯定就不够"敬业"了，居然没有恶心到你。

不管怎么说，遇到那些恶心的样式需求，多少会跟UI、PM产品经理理论一番，但是也会失败的时候，没办法???? ，只能迎难而上咯。这里我就整理下我曾经被恶心伤害过的样式需求。

### 三层背景 ###

先来个开胃小菜：

![08a5acb01f13531a20812520e9226198.png][]

可以看到这样样式是类似渐变的效果。首先想到的应该是渐变样式，没错，渐变倒是可以实现上述样式，但是真正做到样式那样的颜色过度占比，恐怕不是那么好协调。（经常被渐变的调整鞭打???? ）

还有小伙伴说：“这还不简单，直接上图片！UI妹纸，切下这个背景图”。

![6eb5cf70d77b2f3fb53559287228d0e7.png][]

哈哈哈，完美解决，全剧终！停下正在鼓掌的手，今天我们用不为人知的解决方案搞定它！

正如标题所示：三层背景，我们可以联想到伪类元素，直接加个`::after`和`::before`就完事了。

<div class="footer"></footer>
    
    <style>
    // 底色
    .footer {
      background:#eef0f3;
    }
    // 左边的颜色值
    .footer::before {
      background:#D0FC00;
    }
    // 左右的颜色值
    .footer::after {
      background:#366CE3;
    }
    </style>

怎么样，可以说非常简单吧。开胃小菜吃完了，咱们继续！

![59f99e47f4d72f3aa205fe901b56d3df.png][]

### 实现对话气泡效果 ###

先上图：

![3010ec1d18256c2bbcd9893767caa3b7.png][]

这个需求也很常见吧！思路是什么呢？

先用一个元素做成一个正方形，然后再从正方形变成想要方向的三角形，最后利用定位定在你想要的位置上。比如这样：

![9fd97f83006f5d3ebb6f4cf240bd0c87.png][]

接着借用第二个元素，利用上面的原理去制作一个白色的正方形，然后制作成一个白色的三角形，最后覆盖掉上面三角元素的阴影部分。

我先去掉上面元素后，它是长这样的:

![ef80a0b6a190232e216bb36c641c23bc.png][]

可以看到第二个元素是一个旋转了45度的白色的正方形

![eab7542e0d7b5c5930a18b145c5abcdf.png][]

最后直接上代码吧。

// html
    <div class="box">
      <span class="bot"></span>
      <span class="cover"></span>
      <p>气泡对话框效果</p>
    </div>
    
    // css
    .box {
      margin: 50px auto;
      width: 300px;
      padding: 30px 20px;
      border: 5px solid #beceeb;
      position: relative;
    }
    .box span {
      width: 0;
      height: 0;
      font-size: 0;
      overflow: hidden;
      position: absolute;
    }
    .box span.bot {
      border-width: 20px;
      border-style: solid dashed dashed;
      border-color: #beceeb transparent transparent;
      left: 80px;
      bottom: -40px;
    }
    .box span.cover {
      border-width: 20px;
      border-style: solid dashed dashed;
      border-color: #ffffff transparent transparent;
      left: 80px;
      bottom: -33px;
    }

其他方向的或者大小形状都可以根据三角形的样式去控制。

![4fe7dce0b097e7d040fc76f9e6046c14.png][]

### 改变input 提示文字的样式 ###

input的placeholder样式一直存在兼容性，尤其在手机端上。所以？直接上代码吧。

![77dfd03b87875e6ff935fa85bc0ea8a4.png][]

<input type="text" placeholder="请输入名字" style="padding:10px 15px">
    
    input::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #4ee03a;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #4ee03a;
    }
    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #4ee03a;
    }
    input:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #4ee03a;
    }

### 书签 ###

直接上设计图:

![eb7846b3fa656531624522175efbef89.png][]

相信看到上面的"开胃菜"，这道需求应该也有些许思路吧。黄色背景的框就没什么说得了，就是加了CSS3的"背投"效果。

上面的胶带纸效果有点意思了。这个微微倾斜的胶带是CSS3写出来的效果，有RGBA显示半透明背景色，box-shadow显示淡淡的投影，transform旋转效果。元素使用`::after`伪类生成。

// html
    <div class="page">
      <p>PM大佬的脑洞大开</p>
      <p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
      <p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
      <p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
      <p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
      <p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
    </div>
    
    //css
    .page {
      width: 300px;
      margin: 0 auto;
      width: 600px;
      padding: 1em 0 2em;
      background: #f4f39e;
      -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
      -webkit-box-shadow: 0 2px 10px 1px rgb(0 0 0 / 20%);
      box-shadow: 0 2px 10px 1px rgb(0 0 0 / 20%);
      position: relative;
    }
    .page:after {
      width: 180px;
      height: 30px;
      content: " ";
      margin-left: -90px;
      border: 1px solid rgba(200, 200, 200, 0.8);
      background: rgba(254, 254, 254, 0.6);
      -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
      -moz-transform: rotate(-5deg);
      -webkit-transform: rotate(-5deg);
      -o-transform: rotate(-5deg);
      transform: rotate(-5deg);
      position: absolute;
      left: 50%;
      top: -15px;
    }

### 花里胡哨登录按钮 ###

先来看演示效果

![d1896fe1793d3ee963e7dd4224587917.png][]

嗯，确实略带花哨。直接开代码吧。

// html
    <div class="wrap">
      <div class="btn-slide">
        <span class="circle"><i class="fa fa-rocket"></i></span>
        <span class="title">登录</span>
        <span class="title-hover">点击登录</span>
      </div>
    </div>
    
    // css
    .btn-slide {
      position: relative;
      display: inline-block;
      height: 50px;
      width: 200px;
      line-height: 50px;
      border-radius: 50px;
      background: #fdfdfd;
      border: 2px solid #ae111c;
      transition: 0.5s;
    }
    
    .btn-slide:hover {
      background-color: #ae111c;
    }
    
    .btn-slide:hover span.circle {
      right: 100%;
      margin-right: -45px;
      background-color: #fdfdfd;
      color: #ae111c;
    }
    
    .btn-slide:hover span.title {
      right: 40px;
      opacity: 0;
    }
    
    .btn-slide:hover span.title-hover {
      opacity: 1;
      right: 40px;
    }
    
    .btn-slide span.circle {
      display: block;
      background-color: #ae111c;
      color: #fff;
      position: absolute;
      float: right;
      margin: 5px;
      line-height: 42px;
      height: 40px;
      width: 40px;
      top: 0;
      right: 0;
      transition: 0.5s;
      border-radius: 50%;
    }
    
    .btn-slide span.title,
    .btn-slide span.title-hover {
      position: absolute;
      right: 90px;
      text-align: center;
      margin: 0 auto;
      font-size: 16px;
      font-weight: bold;
      color: #ae111c;
      transition: 0.5s;
    }
    
    .btn-slide span.title-hover {
      right: 80px;
      opacity: 0;
      color: #fff;
    }

以上就是PM产品大佬提给我的需求了，你还有什么补充吗？

[08a5acb01f13531a20812520e9226198.png]: /images/20220829/b608bb47573046fca8b4a96a6a74834d.png
[6eb5cf70d77b2f3fb53559287228d0e7.png]: /images/20220829/e563107860464f6d846c13312190a957.png
[59f99e47f4d72f3aa205fe901b56d3df.png]: /images/20220829/417176124a314f3da89f1969b9f8bd99.png
[3010ec1d18256c2bbcd9893767caa3b7.png]: /images/20220829/56d14ef0708a4da68f47bee7114ec873.png
[9fd97f83006f5d3ebb6f4cf240bd0c87.png]: /images/20220829/23ccee56ab3642cdacdf1bc0e2b4a590.png
[ef80a0b6a190232e216bb36c641c23bc.png]: /images/20220829/7682dfd082d848a2a303026b214a57ae.png
[eab7542e0d7b5c5930a18b145c5abcdf.png]: /images/20220829/18cc74b8817e489eb0c89842f5910ff3.png
[4fe7dce0b097e7d040fc76f9e6046c14.png]: /images/20220829/16207f9499f24c9bbfbd5a416de33089.png
[77dfd03b87875e6ff935fa85bc0ea8a4.png]: /images/20220829/462f84ff7c514c23886833e550f37f76.png
[eb7846b3fa656531624522175efbef89.png]: /images/20220829/d0098ebe90714406a9e35d9afce97e79.png
[d1896fe1793d3ee963e7dd4224587917.png]: /images/20220829/be8925840f6e45438043a6d15cd7c2eb.png