1、更改字体,图标大小小于12px无效的问题

若我们设置font-size:10px是不会有效果的,需要使用 transform: scale(0.68); 更改字体最小大小

2、设置div边框虚化,阴影效果 box-shadow: #E8E8E8 0px 0px 10px 0px;"

3、更改框架原有样式不生效问题

有的时候我们想更改某些前端框架自带的样式风格,发现设置样式不生效,这个时候就需要使用 ↓ 如下方式才能生效

  :host ::ng-deep .ant-card-body{ padding-top: 6px; } 

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样式效果的更多相关文章

  1. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  2. 常用的 css 样式 记录

    1.font-style 属性指定文本的字体样式. 对应的值有: normal 默认值.浏览器显示一个标准的字体样式;  italic 浏览器会显示一个斜体的字体样式;  oblique  浏览器会显 ...

  3. 一些常用的CSS样式

    1. overflow: auto 允许盒子容器内容自动上下滚动 2. style="color:red solid" 设置元素边框样式 3.  white-space:nowra ...

  4. 常用的CSS样式示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 购物车css样式效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. css样式清零及常用类

    css样式清零及常用类 @charset "utf-8"; /*CSS Reset*/ /*"微软雅黑","\5FAE\8F6F\96C5\9ED1& ...

  7. CSS样式表(三)

    前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...

  8. CSS样式的面向对象思想(一)

    今天来谈一谈CSS样式的面向对象写法.顾名思义,面向对象是高级语言具备的特性,主要是为了程序高可复用,解决模块之间的耦合关系,那么像CSS这样的脚本语言是否也可以使用面向对象的思想,来提高代码的可维护 ...

  9. ReactNative学习之css样式使用

    前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...

随机推荐

  1. 小程序上传base64的图片,可上传多张

    微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...

  2. 题解 最长上升序列2 — LIS2

    最长上升序列2 - LIS2 Description 已知一个 1 ∼ N 的排列的最长上升子序列长度为 K ,求合法的排列个数. Input 输入一行二个整数 N , K ( K ≤ N ≤ 15) ...

  3. Spring Security 解决X-Frame-Options deny

    错误信息: Refused to display 'https://github.com/hwclass/awesome-sound' in a frame because it set 'X-Fra ...

  4. Jmeter+ant+Jenkins接口自动化框架搭建

    摘自:https://testerhome.com/topics/13389 一.背景  上一篇讲了Jmeter 接口自动化-脚本数据分离实例,我们知道怎么利用Jmeter去编写接口自动化脚本,但是接 ...

  5. javaScript第一篇

    什么中DOM: DOM是一套对文档内容进行抽象各概念化的方法; 例如:我们对别人说:“猫在沙发上!”:别人听到的不会是“狗已经跑了”:这是因为人类对已有的事物有了一套公有的认识;再比如,有人问你,“左 ...

  6. CUDA-F-1-0-并行计算与计算机架构

    Abstract: 本文从总体上给出了CUDA编程的Big picture,后续所有的文章都在本文的基础上详细展开. Keywords: 并行计算,串行编程,并行编程,计算机架构,并行性,异构架构,C ...

  7. less的解析笔记

    Less是一种动态的样式语言.Less扩展了CSS的动态行为,比如说,设置变量(Variables).混合书写模式(mixins).操作(operations)和功能(functions)等等,最棒的 ...

  8. bzoj4321

    queue2 HYSBZ - 4321 n 个沙茶,被编号 1~n.排完队之后,每个沙茶希望,自己的相邻的两 人只要无一个人的编号和自己的编号相差为 1(+1 或-1)就行:  现在想知道,存在多少方 ...

  9. npm脚本编译代码

    echo offset codeUrl=D:\svn\oppo_mis\OCSS_NEW\Branches\ProjectCode20190909\h5_ocssset publishUrl=D:\P ...

  10. CodeForces–833B--The Bakery(线段树&&DP)

    B. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...