1、边框阴影

box-shadow:5px 10px 20px #000;
1)5px 相对于原div的左上角的x偏移
2)10px 相对于原div的左上角的y偏移
3)20px 在偏移的基础上进行模糊处理
4)#000 阴影div的颜色

 .div1{margin:100px;width:256px;height:256px;background: #888;box-shadow:15px 15px 30px #000;}   </style>
</head>
<body><div class="div1"></div>

2、边框图片

border-image:url(border.png) 30 30 round;
border: 10px solid transparent;边框
1)url边框图片地址
2)30裁剪的宽度
3)30裁剪的高度
4)round环绕
5)stretch拉伸

.div1{margin:100px;width:256px;height:256px;background: #888;border: 10px solid transparent;border-image: url(/img/border.png) 30 30 round;} </style>
</head>
<body><div class="div1"></div>

拉伸

border-image: url(/img/border.png) 30 30 stretch;

3、背景样式:

1.背景大小
background-size:100%;

2.背景位置
background-origin
1)border-box #以border来设置背景图
2)padding-box #以padding来设置背景图
3)content-box #以content实际内容来设置背景图
一个框一个图

.div1{margin:100px;width:256px;height:256px;background: url(/img/web.png) no-repeat center center;background-size: 100%;border: 1px solid #00f;} </style>
</head>
<body><div class="div1"></div>

一个框多个图

.div1{margin:100px;width:256px;height:256px;background: url(/img/web.png) ;background-size: 10%;border: 1px solid #00f;}

以border来设置背景图

.div1{margin:100px;width:256px;height:256px;background: #888 url(/img/web.png) no-repeat center center;background-size: 100%;border: 50px solid transparent;padding: 50px;margin: 50px;background-origin: border-box;}

以padding来设置背景图

background-origin: padding-box;

以content实际内容来设置背景图

background-origin: content-box;

4、文本样式:

1.text-shadow
text-shadow:5px 5px 5px #000; #文字阴影

2.word-wrap
word-wrap:break-word; #词折行(浏览器默认就会根据词折行)
word-break:break-all; #字折行

文字阴影

span{font-size:50px;color:#888;text-shadow:3px 3px 5px #000;}</style>
</head>
<body><span>最近生意总被小乌抢走!</span>

折行

/*word-wrap:break-word; */word-break:break-all;

5、字体样式:

@font-face
{
font-family: fzm;
src: url(‘fzm.ttf’);
}

@font-face{font-family: cai; src: url('/public/cai.otf');}span{font-size: 40px;font-weight: bold;font-family: cai;}</style>
</head>
<body><span>最近生意总被小乌抢走!</span>

6、2D样式:

transform:
1.translate()
移动坐标
translate(30px,50px);

2.rotate()
旋转角度
rotate(30deg);

3.scale()
比例
scale(2,3);

rotate 2D旋转

.div1{width:256px;height:256px;} .div1 img{display: block;}</style><script src="/bootstrap4/jquery.min.js"></script>
</head>
<body><div class="div1"><img src="/img/web.png" class='img' width='100px'></div>
</body>
<script>
s=0;
v=10;setInterval(function(){s+=v;document.title=s;$('.div1').css({'transform':'rotate('+s+'deg)'});
},10);

scale放大倍数

.div1{width:256px;height:256px;background: #888;overflow:hidden;}    .div1 img{display: block;}</style><script src="jquery.min.js"></script>
</head>
<body><div class="div1"><img src="web.png" class='img'></div>
</body>
<script>
$('.img').mouseenter(function(){$(this).css({'transform':'scale(1.2,1.2)'});
});$('.img').mouseleave(function(){$(this).css({'transform':'scale(1,1)'});
});
</script>

translate()

 body{padding:50px;margin:0px;}.div1{width:256px;height:256px;}  .div1 img{display: block;}</style><script src="/bootstrap4/jquery.min.js"></script>
</head>
<body><div class="div1"><img src="/img/web.png" class='img'></div>
</body>
<script>
$('.div1').click(function(){$(this).css({'transform':'rotate(30deg)'});s=0;v=10;setInterval(function(){s+=v;$('.div1').css({'transform':'rotate(30deg) translate('+s+'px,0px)'});},100);
});
</script>

1、

WEB前端代码：边框阴影、边框图片、背景样式、文本样式、字体样式相关推荐

WEB前端代码书写规范
WEB前端代码书写规范 1. 命名规范 a.ClassName命名 ClassName的命名应该尽量精短.明确,必须以单页面字母开头命名,且全部字母为小写,单词之间统一使用下划线 "_&qu ...
Web 前端代码规范
Web 前端代码规范最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前 ...
html字面量编码,Web 前端代码规范
Web 前端代码规范最后更新时间:2017-06-25 原始文章链接: 此项目用于记录规范的.高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范. 目录前端 ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
CSS_02_背景_文本_字体_链接_列表_表格
CSS 背景 CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背景效果: background-color 颜色 background-image 图片 background-r ...
[H5]CSS3样式(背景、文本、字体、链接、列表、表格和轮廓)
[H5]CSS3样式(背景.文本.字体.链接.列表.表格和轮廓) [index.html] <!DOCTYPE html> <html lang="en"> ...
怎样在线把别人web前端代码抓下_自学web前端8个月，我是怎样拿下7K薪资的？
自学web前端8个月,我是怎样拿下7K薪资的?自学两个字,说起来很轻松,但真正做起来那真是绝非易事,说实话,在我收到HR发来的offer那一刻,眼泪差点掉下来,这个过程中吃的这些苦,真的只有自己才能知 ...
【最全IDEA个性化教程】idea设置主题+恢复主题默认设置+设置选中代码颜色+关键字颜色+设置字体大小、样式、颜色+设置背景颜色、图片+设置导航栏背景颜色+设置控制台字体样式及背景+常用快捷键)
目录下载设置主题样式+恢复主题默认设置 1 个性化代码段 1.1设置颜色设置光标颜色自定义图片做背景修改代码段的颜色和背景颜色选中代码块颜色修改,修改括号颜色 1.2 设置字体大小.格式 1 ...
CSS知识点整理(代码示例参考w3shool）（包括CSS概念语法作用、CSS引入方式、CSS背景、文本、字体、链接、轮廓、表格、常用选择器等）
文章目录 CSS简介 CSS 概念 CSS 作用 CSS 语法 CSS引入方式 1.内联样式表 2.内部样式表 3.外部样式表 CSS常用样式 CSS背景 1.背景色:background-color ...
web前端批量下载文件和图片探索
1.图片,文件批量下载(不跨域的情况下) import JSZip from 'jszip'; import {saveAs} from 'file-saver'; import axios from ...

WEB前端代码：边框阴影、边框图片、背景样式、文本样式、字体样式