赢在职场－WEB全栈开发－1-5border

来源：互联网发布：photoshopcs6 for mac 编辑：程序博客网时间：2024/05/02 12:30

<!doctype html>

<html>

<head>

<style>

.InternalStyle1

{

width:660px;height:660px;

background:green center bottom no-repeat url("dragon.png");

}

</style>

<style>

#InternalStyle2

{

width:600px;

height:1500px;

background-color:bisque;

background-image: url("dragon.png");

background-repeat: repeat-y;

background-position: left;

background-attachment: fixed;

/*fixed 不滚动 scroll 滚动*/

}

</style>

//border: 10px solid green;

<style>

.border1

{

width:600px;

height:500px;

//border-color: blueviolet;

//border-width: 25px;

//border-style: dashed;

/*精细化控制*/

border-top-width: 5px;

border-bottom-width: 10px;

border-right-width: 15px;

border-left-width: 25px;

border-top-style: dashed;

border-bottom-style:dotted;

border-right-style:solid;

border-left-style:double;

border-top-color: blueviolet;

border-bottom-color: rebeccapurple;

border-right-color: red;

border-left-color: rosybrown;

}

</style>

<style>

.border2

{

width:0PX;

height:0PX;

border-top-color: blueviolet;

border-bottom-color: rebeccapurple;

border-right-color: red;

border-left-color: rosybrown;

border-width: 25px;

border-style: dashed;

}

</style>

</head>

<body>

<!属性:属性值(属性单位)>

<div style = "width:300px;height:100px;background:red">inline style1 行内样式1</div>

<div class = "InternalStyle1">Internal Style1 内部样式1</div>

<div class = "ExternalStyle1">External Style1 外部样式1</div>

</body>

</html>

0 0