CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆

1、渐变字体

　　主要是看：-webkit-background-clip: text; 该属性

复制代码
<style>
        .b1{
          width: 500px;
          height: 200px;
          font-size: 100px;
          background-image: linear-gradient(to bottom, rgb(233, 16, 16), rgb(61, 13, 236));
          -webkit-background-clip: text;
          color: transparent;
          /* -webkit-text-fill-color: transparent; */
        }
      </style>
    </head>
    <body>
      <div class="b1">
        <div class="b2">测试知否</div>
      </div>
    </body>
复制代码

2、镂空字体

　　主要是：-webkit-text-stroke: 3px yellow; 该属性。

复制代码
.b1{
          width: 500px;
          height: 150px;
          font-size: 100px;
          background-image: linear-gradient(to bottom, rgb(233, 16, 16), rgb(61, 13, 236));
          /* -webkit-background-clip: text; */
          color: transparent;
          -webkit-text-stroke: 3px yellow;
        }
复制代码

 3、input框提示信息颜色

复制代码
<style>
      /* .b1{
        -webkit-text-stroke: 1px yellow;
      } */
      input::-webkit-input-placeholder { color: red; }/* WebKit browsers */
      input:-moz-placeholder { color: red; }/* Mozilla Firefox 4 to 18 */
      input::-moz-placeholder { color: red; }/* Mozilla Firefox 19+ */
      input:-ms-input-placeholder { color: red; }/* Internet Explorer 10+ */
    </style>
  </head>
  <body>
    <input class="b1" type="text" placeholder="测试知否">
  </body>
复制代码

4、给图片加上内阴影

　　通过 box-shadow 属性可以给DIV增加外阴影，而 inset 这个属性则可以变为内阴影

　　这里有个小技巧通过给图片设置相对定位并给上叠层顺序为 -1 就可以实现图片内阴影

复制代码
<style>
      .b1{
        box-shadow:inset 0 0 30px #FF1493;
        display:inline-block;
      }
      img{
        position: relative;
        display: block;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <div class="b1">
      <img src="./ly.png" width="100px">
    </div>
  </body>
复制代码

5、3/4圆

　　其实3/4圆弧可以用一句css就能解决，border-left:2px solid transparent; 绘出圆后，将一侧边框设置为透明即可搞定

复制代码
#cir{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    border-radius: 50%;
    border-left: 2px solid transparent;
    transform: rotate(45deg);
}
复制代码

 

posted @   古兰精  阅读(1144)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae