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);
}

转载于:https://www.cnblogs.com/goloving/p/10180691.html

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

CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影
1.渐变字体主要是看:-webkit-background-clip: text; 该属性 <style>.b1{width: 500px;height: 200px;font-size ...
CSS渐变、CSS3字体及CSS3文本效果
1.CSS渐变 1.1线性渐变 .box{ width: 300px; height: 300px; background: linear-gradient(red,blue) position渐变方 ...
input框中颜色color修改了但是字体颜色一直是默认灰色
输入框里面的颜色一直默认为灰色.加了颜色color,权重最高但是颜色还是默认灰色. 这是由于谷歌浏览器的自带样式的缘故.在样式中加个-webkit-text-fill-color: #1576DC;/ ...
css input光标粗细,如何用CSS原生属性caret-color改变input输入框光标颜色
表单对大家来说并不陌生,当然,我也不是来和大家聊怎么做表单或者处理表单的样式网格,因为这些对于大家来说都是小儿科的东西.而是来聊聊怎么改变表单控件中光标的颜色.日常开发中我们可能会有改变input光标 ...
怎样调整input框背景颜色_不用花钱，自己也能制作证件照，更换背景色、排版全搞定...
证件照是工作所必须的,但是要求总是变来变去,有的需要白色背景,有的需要蓝色背景,还有需要红色背景的.手机有很多制作证件照的软件,但是大部分都是收费的,我们能不能自己制作一张既美观.又能随机应变,关键是 ...
html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...
使用css修改input框中checkbox的样式
概述在页面设计时,我们经常使用input复选框.由于界面设计的需要,我们需要修改复选框的样式,使得界面更美观或者适应新的需求.由于CheckBox伪类修改比较复杂,通常修改的方式有两种,一个是链入图 ...
四、Input框改placeholder中字体的颜色
Input框改placeholder中字体的颜色 input::-webkit-input-placeholder { color: #ccc; font-size: 12px; } 转载于:http ...
改变input框disabled 属性的背景颜色以及字体颜色
改变input框disabled 属性的背景颜色以及字体颜色 color:#333333; background: white; opacity: 1; -webkit-text-fill-color ...