css3新增边框、阴影、边框、背景、文本、字体
css3和css有什么区别？简单来讲css3是css（层叠样式表）技术的升级版本，css3新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。css主要能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3新增边框、阴影、背景、文本、字体</title>
<style type="text/css">
/*border-radius:边框圆角 圆角直径*/
div#ceshi{
width: 200px;
height: 200px;
background-color: #f90;
margin-bottom: 50px;
/* border-radius: 50%;
border-radius: 200px; */
border-radius: 1px 10px 30px 70px;/*顺时针*/
border-radius: 1px 10px 30px;/*对角线*/
border-radius: 1px 10px;
border-radius: 10px;
} /*#ceshi{
box-shadow: 10px 20px 30px 10px purple inset;
}*//*X偏移 Y偏移 阴影模糊值 阴影往外延伸 阴影颜色 内阴影*/
#ceshi{
box-shadow: 10px 20px 30px 10px red;
} /* border-image:url('') X y round/repeat/stretch
边框图片环绕/平铺/拉伸 */
div.box{
width: 128px;
height: 128px;
background-color: #ccc;
margin: 0 auto;
border:30px solid transparent;
/* border-image:url('images/b.png') 20 20 round; */
border-image-source:url('images/b.png');
border-image-slice: 20;
border-image-width: 10;
border-image-outset:1;
border-image-repeat:round;
margin-bottom: 100px;
} /*背景样式background-size*//*background-origin背景图大小和位置*/
.pic{
width: 400px;
height: 300px;
border: 10px solid red;
background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1314383665,2282288429&fm=11&gp=0.jpg) no-repeat;
background-size: 50%;/*容器宽度乘百分比为背景图大小*/
background-origin: border-box;/*边框区域*/
background-origin: padding-box;/*内边框区域*/
background-origin: content-box;/*有效区域*/
} /*文本字体*/
.text{
text-shadow: 5px 1px 2px red;/*文本阴影*/
width: 400px;
border: 1px inset green;
margin-top: 50px;
word-break: break-all;/*单词折行*/
word-wrap: break-word;
font-family: dhnblog;
} /*自定义字体类型*/
@font-face{
font-family:dhnblog;
src:url('images/fzm.ttf');
}
</style>
<script>
window.onload=function(){
var obj=document.getElementById('ceshi')
obj.onclick=function(){
console.log('音乐不能阻碍工作，是为了更好的服务工作')
}
}
</script>
</head>
<body>
<div id="ceshi"></div>
<div class="box">
<img src="data:images/ft.png" alt="">
</div>
<div class="pic">
今日の天気は良い今日の天気は良い今日の天気は良い今日の天気は良い
</div>
<div class="text">
<p>Once the sea was difficult for the waterExcept Wushan is not a cloudYou are to me the sea and Wushan
</p>
<p>海が水にとって困難だったら武山は雲ではないことを除いてあなたは私にとって海と武山です</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>Maybe program apes are not good at words, and warmth is hidden in the cold and the heat inside, but those seemingly cold codes can also be combined into the most romantic and beautiful love words. Today we take a look at how programmers put love words into romance. Code.</p>
</div>
</body>
</html>
css3新增边框、阴影、边框、背景、文本、字体的更多相关文章
- CSS3——背景 文本 字体 链接 列表样式 表格
背景 background-color rgb(255,0,0,1) 最后一个值表示透明度,范围是 0--1 background-image 默认平铺重复显示 background-rep ...
- css3新增（圆角边框(border-radius)，盒子阴影(box-shadow)，文字阴影(text-shadow)，背景缩放(background-size)）
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- css 样式设计（一）（ 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 ）
一.css在线150个例子 http://www.w3cschool.cc/css/css-examples.html 二.背景图片水平方向重复 : body { background-image:u ...
- Android 使用xml实现边框阴影，背景渐变效果（附有RGB颜色查询对照表）
上图是显示效果,下面是代码实现: 个人理解就是使用layer-list实现两层view的叠加,其中top,left,bottom,left控制阴影 <?xml version="1.0 ...
- 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格
什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...
- css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）
font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...
- CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）
matrix CSS3 1. 圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
随机推荐
- OGG bi-directional replication for Oracle DB
Overview of an Active-Active Configuration Oracle GoldenGate supports an active-active bi-directiona ...
- Python通过win32 com接口实现offic自动化
最近几天通过Python做一些自动生成office报表的东东,比如解析.xml文件,导出.html/WORD/PPT等格式,html不足一提,只需要简单的html静态网页知识即可,这儿要说的是怎么生成 ...
- 夜晚 十点 React-Native 源码 暴力畜 系列
百度 上 给的 关于 React-Native 的 排名 前三 继续 跟
- 团队项目—Beta版本冲刺3
博客介绍 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业要求在哪里 https://w ...
- [JLOI2014]松鼠的新家（树链剖分）
[JLOI2014]松鼠的新家(luogu) Description 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间 ...
- 如何使用jmeter做一个功能的性能测试
一.为什么又再次写类似的文章? 在博客园和公号写文章,已经快两年了,所以自然在公号和博客园都能联系到我的. 也就是几天前,有个人加我微信,对于总有人加我好友,我已经觉得不奇怪了,为什么呢? 加我好友的 ...
- Hadoop-3.1.2安装步骤
Hadoop-3.1.2 安装步骤 第一步 准备 服务器配置 1. 在VMware中安装把Centos7安装成功后,需要把界面设置为命令行启动,因为默认的启动方式是图形界面启动 systemctl ...
- 源码级别gdb远程调试（实现OS简单内核）
最近在学着编写一个操作系统的简单内核,需要debug工具,我们这里使用gdb来进行调试,由于虚拟机运行和本机是两个部分,所以使用 gdb 的远程调试技术,这里对 gdb 常见调试以及远程调试方式做一个 ...
- 消息中间件面试题31道RabbitMQ+ActiveMQ+Kafka
消息中间件面试题31道RabbitMQ+ActiveMQ+Kafka 前言 文章开始前,我们先了解一下什么是消息中间件? 什么是中间件? 非底层操作系统软件,非业务应用软件,不是直接给最终用户使用的, ...
- 懒人必备，IntelliJ IDEA中代码一键生成
之前有不少小伙伴问松哥微人事项目(https://github.com/lenve/vhr)使用的 MyBatis 逆向工程在哪里?其实旧版微人事当时没有使用逆向工程,是我自己手动敲出来的,当然手动敲 ...