博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS:阴影/边框/背景
阅读量:6274 次
发布时间:2019-06-22

本文共 897 字,大约阅读时间需要 2 分钟。

hot3.png

文本阴影(text-shadow):(,,,)水平的偏移值,垂直方向的偏移量,模糊度,阴影颜色

box-shadow(元素阴影):(,,,,)水平的偏移值,垂直方向的偏移量,模糊度,阴影颜色,外延值

text-overflow文本溢出

word-wrap(换行):break-all让连续的文字断行

引用字体库:@font-face{}

font-family{设置为定义的字体库}

颜色:rgba( , , , 0-1透明度):对话框/hsl(色调,饱和度,亮度)/hsla/rgb(0-255)

边框:(border-radius:半径;可设置多个值(左上,右下/右上和左下一致)边框圆角)eg(五环);

border-image:url()  (边框大小) round(拉伸填满)/repeat(重复);//边框图片;必须设置边框大小

背景:(背景默认是从padding开始填充)

background-origin(背景开始的地方(原点)):padding-box;原点/context-box(从内容开始);/border-box(从边框开始);

background-clip(背景裁切):content-box;(从内容开始,将内容前面的背景(padding/border)切掉);padding-box;()/border-box();/text(用字去裁切背景

font-weight:bolder/bold;加粗

background-size(背景大小):200px  200px(水平 垂直高度)/cover(覆盖:图片会等比例缩放,直到两边都覆盖容器,背景可能会出去)/contain(包含:图片等比例缩放,直到一边覆盖到容器,背景不会出去) ;

多背景:background:url() 10 10(位置),url() 100 100(位置);

背景渐变:background:linear-gradient线性的(to butom(从上到下), #f00,#0f0);

转载于:https://my.oschina.net/u/4045971/blog/3017279

你可能感兴趣的文章
【译】Tree-shaking - webpack 2 和 Babel 6
查看>>
开源跨平台移动项目Ngui【Action动作系统】
查看>>
ESP32:mdns协议
查看>>
Docker拥抱k8s早有预兆,Docker现何去何从?
查看>>
PHP 源码探秘 - 为什么 trim 会导致乱码
查看>>
你不知道的CSS(二)
查看>>
Head First Python 学习心得(1-6章)
查看>>
从0实现一个tiny react(一)
查看>>
更换电脑后迁移博客
查看>>
20 行代码写一个数据推送服务
查看>>
Android逆向工程 实践篇
查看>>
[LeetCode] Pacific Atlantic Water Flow
查看>>
adb 常用命令
查看>>
[vscode]快速更新package.json里的依赖版本
查看>>
Windows中MongoDB之简单安装(1)
查看>>
搭建Hexo博客进阶篇---主题自定义(三)
查看>>
【Mysql中间件】Mycat安装部署+读写分离
查看>>
这3家在线旅行公司是如何通过转化优化提高订单量的
查看>>
RocketMq使用过程的那些小事
查看>>
Autodesk Forge 学习简谈 - 4
查看>>