CSS——常用修改样式

去除input type为number时候的按钮

input::-webkit-inner-spin-button {-webkit-appearance: none;
}
input::-webkit-outer-spin-button {-webkit-appearance: none;
}

修改input的placeholder

 ::-webkit-input-placeholder {color: #eee;
}
:-moz-placeholder {color: #eee;
}
::-moz-placeholder {color: #eee;
}
:-ms-input-placeholder {color: #eee;
}

单行文本超出显示省略号

            overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

多行文本超出显示省略号

  width: 8rem;line-height: 0.25rem;font-size: 0.14rem;color: #666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;word-break: break-all;overflow: hidden;

设置滚动条样式

html::-webkit-scrollbar {width: 5px;height: 3px;
}html::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background-color: #8EC5FC;background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}html::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 10px;background-color: #0093E9;background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

修改记住密码框默认背景色

input:-webkit-autofill {background-color: #0093E9;background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

强制不换行

  white-space:nowrap; //不换行word-wrap:break-word; //自动换行word-break:break-all; //强制英文单词断行

模糊

           .child{background-color: rgba(0,0,0,0.6);backdrop-filter: blur(12px);}.child-box{filter:blur(12px)}

https://blog.csdn.net/HarryHY/article/details/124985008?spm=1001.2014.3001.5501

第一行的第一个字母

CSS 伪元素 ::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。
值得注意的是必须得要是块级元素 display:block

                &::first-letter {font-size: 40px;font-weight: 600;}

三角形

            &::before{content: '';position: absolute;bottom: -30px;left: 50%;transform: translateX(-50%); border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 15px solid rgba(255, 255, 255, 1);border-bottom: 15px solid transparent;}

CSS——常用修改样式相关推荐

html5公共样式css,css常用公共样式
/*style reset*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,form,input,textarea,select{padding:0; margin:0;fon ...
html怎么给变量添加样式,通过CSS变量修改样式
js怎么去修改css伪类样式呢?但是js并没有伪类选择器,那么该怎么办呢?网上有不少方法,比如通过切换元素的类.在style中动态插入新的样式等. 那么这里再来一种方法,设置css变量(var),通过 ...
CSS hr修改样式
hr 默认样式若加上这样CSS hr{height: 0;border: none;border-top: 1px solid red; } 会变为
css滚动条修改样式
css /*滚动条样式*/ 选择器::-webkit-scrollbar,.Kowloon .right_content::-webkit-scrollbar {/*滚动条整体样式*/width: 4 ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
遇到问题：网页插入美洽页面，如何它的修改样式？
script 引入美洽页面在开发者工具的 element 里,发现原来是 iframe 标签我要实现的:(如下图:绿色框框部分) 1. 在页面上加左箭头用于返回上一页 2. 移动元素的位置 ...
css常用样式，导致页面css样式混乱的原因，css遇到的问题，我和小伙伴们惊呆了
css常用技巧本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 实现组件的自动换行排布: flex-wrap: wrap;使列表排成一行方法一:div{di ...
html如何修改字体黑体,css如何修改字体样式？
css如何修改字体样式?比如黑体.宋体.微软雅黑.英文字体等字体如何设置?下面本篇文章给大家介绍一下使用css修改字体样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. cs ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...

CSS——常用修改样式

去除input type为number时候的按钮

修改input的placeholder

单行文本超出显示省略号

多行文本超出显示省略号

设置滚动条样式

修改记住密码框默认背景色

强制不换行

模糊

第一行的第一个字母

三角形

CSS——常用修改样式相关推荐

最新文章

热门文章

CSS——常用修改样式

去除input type为number时候的按钮

修改input的placeholder

单行文本超出显示省略号

多行文本超出显示省略号

设置滚动条样式

修改 记住密码框 默认背景色

强制不换行

模糊

第一行的第一个字母

三角形

CSS——常用修改样式相关推荐

最新文章

热门文章

修改记住密码框默认背景色