CSS3-设置基本边框和背景

CSS3中设置基本边框属性

Border-width 设置边框的宽度
Border-style 设置边框的样式类型
Border-color 设置边框的颜色
Border 设置所有边框（实例：P{border:10px;solid black}）
Border-top 设置上边框
Border-button 下
Border-left 左
Border-right 右
Border-radius 设置圆角边框（实例：border-radius：20px/15px 分别对应圆心离边框左右边距为20px，距离上下边距为15px）

实例：

<!DOCTYPE html>
<html>
<head><meata charset="UTF-8" /><title>MelanceXin BorderCSS_Test</title><style type="text/css">.class1 {border-width: 5px 10px 5px 10px;/* 分别对应  上  右  下  左  边框的粗细 */border-color: #345cff;border-style: solid;/* solid 实线  dashed 虚线 dotted 点线  none 无边框  . */border-top-color: #fff314;/* 设置上边框的颜色 */border-bottom-style: dotted;/* 设置下边框的样式 */}.class2 {border: 5px solid red;/* 边框  粗细  样式   颜色 */border-top: 10px dashed yellow;}</style>
</head><body><p class="class1" style="width:200px">MelanceXin </p><br><p class="class2"style="width:200px">MelanceXin </p>
</body></html>

实现效果：

CSS3中设置基本背景属性

Background-image 设置背景图片
Background-repeat 设置背景重复方式
Background-attachment 设置背景是否随滚轮移动（Fixed为不随滚轮移动而移动）
Background-color 设置背景颜色
Background-size 设置背景图像的大小

实例1：（图片随页面滚动）

<!DOCTYPE html>
<html><head><meata charset="UTF-8" /><title>MelanceXin BackgroundCSS_Test</title><style type="text/css">.class1 {border: 5px solid red;border-top: 10px dashed yellow;width: 100px;height: 100px;}.class2 {width: 100px;height: 100px;background-image: url(image.jpg);/* 图片的url */background-repeat: no-repeat;/* 图片是否重复 */background-size: cover;background-attachment: none/* 随页面滚动效果 */}body {background-image: url(image.jpg);/* 图片的url */background-repeat: no-repeat;/* 图片是否重复 */background-size: cover;/* 属性值cover   */background-attachment: fixed/* 随页面滚动效果 */}</style>
</head><body><p class="class1">MelanceXin </p><p class="class2">MelanceXin </p>
</body></html>

实例2：（边框圆角效果）

<!DOCTYPE html>
<html><head><meata charset="UTF-8" /><title>MelanceXin BackgroundAndBorderCSS_Test</title><style type="text/css">.class1 {background-attachment: fixed;background-repeat: no-repeat;background-image: url(image.jpg);}.class2 {width: 200px;height: 50px;border: 1px solid black;background-color: antiquewhite;border-radius: 10px/10px; /* css3.0 的新设置  设置正方形的四角圆润    分别距离左边10px 上边10px */}</style>
</head><body class="class1"><p class="class2">MelanceXin </p>
</body></html>

CSS3-设置基本边框和背景相关推荐

CSS3选择器、边框、背景、按钮
1.CSS3概述 (1).CSS3简介如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性,弥补了CSS2的众多不足之处,使得Web开 ...
08.CSS3选择器、边框、背景、按钮
CSS3概述 CSS3简介如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高 ...
html设置表格字体样式表,CSS：表格样式（设置表格边框/文字/背景的样式）
使用CSS可以制作出十分精美的表格. 效果图: 代码: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo ...
Qt 之设置窗口边框的圆角
Qt技术学习班开始了,更多精彩.好玩的内容等着你,赶紧报名吧! 群号:655815739 Qt在设置窗口边框圆角时有两种方式,一种是设置样式,另一种是在paintEvent事件中绘制窗口.下面分别叙述 ...
Qt中设置窗口边框的圆形
Qt在设置窗口边框圆角时有两种方式,一种是设置样式,另一种是在paintEvent事件中绘制窗口. 下面分别叙述用这两种方式来实现窗口边框圆角的效果. 一.使用setStyleSheet方法 this ...
第95天：CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
使用CSS3设置条纹背景
系列文章目录 CSS3实现半透明边框(1) CSS3实现多重边框(2) CSS3如何调整背景图片大小(3) CSS3背景定位(4) 使用CSS3设置条纹背景系列文章目录前言一.水平条纹不等宽的 ...
CSS：设置边框和背景
应用边框样式边框基本设置首先简单介绍一下使用边框最常用的三个基本属性: 属性说明值 border-width 设置边框的宽度度量单位(em.px.cm等) border-color 设置边框 ...
html边框背景图片,css3 边框、背景、文本效果的实现代码
一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...
css样式如何设置边框，阴影，渐变等特效以及通过box-sizing属性设置盒子模型，背景区域设置等
今天,我继续来和大家聊聊css3. 在css3中,新增了很多样式,使得页面更加的美观,效果更加的优秀. 但是,同样要注意的是,很多css3提出的新样式没有得到浏览器的支持,也就意味着有一部分的css3 ...

CSS3-设置基本边框和背景

CSS3中设置基本边框属性

CSS3中设置基本背景属性

CSS3-设置基本边框和背景相关推荐

最新文章

热门文章