记录几个常用的Css样式效果
1、更改字体,图标大小小于12px无效的问题
若我们设置font-size:10px是不会有效果的,需要使用 transform: scale(0.68); 更改字体最小大小
2、设置div边框虚化,阴影效果 box-shadow: #E8E8E8 0px 0px 10px 0px;"
3、更改框架原有样式不生效问题
有的时候我们想更改某些前端框架自带的样式风格,发现设置样式不生效,这个时候就需要使用 ↓ 如下方式才能生效
4、自定义谷歌浏览器滚动条样式
.table_scorll_class {
/*css主要部分的样式*/
/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 7px;
/*对垂直流动条有效*/
height: 7px;
/*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 3px white;
background-color: #fff;
border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
border-radius: 7px;
-webkit-box-shadow: inset 3px white;
background-color: #E8E8E8;
}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
background-color: #fff;
}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
background: #fff;
}
}
记录几个常用的Css样式效果的更多相关文章
- (转载)记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- 常用的 css 样式 记录
1.font-style 属性指定文本的字体样式. 对应的值有: normal 默认值.浏览器显示一个标准的字体样式; italic 浏览器会显示一个斜体的字体样式; oblique 浏览器会显 ...
- 一些常用的CSS样式
1. overflow: auto 允许盒子容器内容自动上下滚动 2. style="color:red solid" 设置元素边框样式 3. white-space:nowra ...
- 常用的CSS样式示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 购物车css样式效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css样式清零及常用类
css样式清零及常用类 @charset "utf-8"; /*CSS Reset*/ /*"微软雅黑","\5FAE\8F6F\96C5\9ED1& ...
- CSS样式表(三)
前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...
- CSS样式的面向对象思想(一)
今天来谈一谈CSS样式的面向对象写法.顾名思义,面向对象是高级语言具备的特性,主要是为了程序高可复用,解决模块之间的耦合关系,那么像CSS这样的脚本语言是否也可以使用面向对象的思想,来提高代码的可维护 ...
- ReactNative学习之css样式使用
前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...
随机推荐
- 小程序上传base64的图片,可上传多张
微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...
- 题解 最长上升序列2 — LIS2
最长上升序列2 - LIS2 Description 已知一个 1 ∼ N 的排列的最长上升子序列长度为 K ,求合法的排列个数. Input 输入一行二个整数 N , K ( K ≤ N ≤ 15) ...
- Spring Security 解决X-Frame-Options deny
错误信息: Refused to display 'https://github.com/hwclass/awesome-sound' in a frame because it set 'X-Fra ...
- Jmeter+ant+Jenkins接口自动化框架搭建
摘自:https://testerhome.com/topics/13389 一.背景 上一篇讲了Jmeter 接口自动化-脚本数据分离实例,我们知道怎么利用Jmeter去编写接口自动化脚本,但是接 ...
- javaScript第一篇
什么中DOM: DOM是一套对文档内容进行抽象各概念化的方法; 例如:我们对别人说:“猫在沙发上!”:别人听到的不会是“狗已经跑了”:这是因为人类对已有的事物有了一套公有的认识;再比如,有人问你,“左 ...
- CUDA-F-1-0-并行计算与计算机架构
Abstract: 本文从总体上给出了CUDA编程的Big picture,后续所有的文章都在本文的基础上详细展开. Keywords: 并行计算,串行编程,并行编程,计算机架构,并行性,异构架构,C ...
- less的解析笔记
Less是一种动态的样式语言.Less扩展了CSS的动态行为,比如说,设置变量(Variables).混合书写模式(mixins).操作(operations)和功能(functions)等等,最棒的 ...
- bzoj4321
queue2 HYSBZ - 4321 n 个沙茶,被编号 1~n.排完队之后,每个沙茶希望,自己的相邻的两 人只要无一个人的编号和自己的编号相差为 1(+1 或-1)就行: 现在想知道,存在多少方 ...
- npm脚本编译代码
echo offset codeUrl=D:\svn\oppo_mis\OCSS_NEW\Branches\ProjectCode20190909\h5_ocssset publishUrl=D:\P ...
- CodeForces–833B--The Bakery(线段树&&DP)
B. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...