css common problems
1. Font gradient compatible
Description: When writing the page, when we set the gradient color to the font, we will find that the font gradient does not take effect on the ios phone or the gradient becomes the background gradient by itself.
Solution: Add a separate label to the font that needs gradient in the html, and then Set the gradient color separately for this label
<a type="nav_cjzj" class="swiper-slide"><i>秒杀专区</i></a>
background: -webkit-gradient(linear,0% 0%,0% 100%,from(#fefaf3),to(#f6c974));
color: transparent;
-webkit-background-clip: text;这里插入代码片
2. Gradient color of border
Description: Only need left and right gradient border
border-image-source: linear-gradient(#f8dec5 0%, #b4785d 50%, #eec28d 75%,#ac6e57 100%);
border-image-slice: 1;
border-top: 0;
border-bottom: 0;
3. Style modification of placeholder in input
Description: To solve the problem of inconsistent input box size caused by the number of characters before the colon, replace the copy before the colon by a placeholder
/* 修改input里面的样式 */
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */ color: #333333;font-size:1.4rem }
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */ color: #333333; font-size:1.4rem}
::-moz-placeholder {
/* Mozilla Firefox 19+ */ color: #333333;font-size:1.4rem }
:-moz-placeholder, ::-moz-placeholder {
opacity: 1; }
:-ms-input-placeholder {
/* Internet Explorer 10-11 */ color: #333333; font-size:1.4rem}
4. The div tag click event is invalid on ios
Description: When the click event occurs, the click event on ios is unsuccessful.
Solution: 1. Replace the div tag with a tag; 2. Add a style to the div tag, cursor: pointer;
cursor:pointer
5. The font color setting is invalid on some Android phones
Description: I found that the ios font color is valid when testing on m, but Android is not.
Result: I found that it is a six-digit hexadecimal character (#333333) that I wrote as four (#3333);
warning: it must be written as three or six Bit