1.1边框和颜色

作者: 宋雨轩同学 | 来源:发表于2020-02-23 12:19 被阅读0次

1.1边框和颜色
SwiftUI 设置边框、透明度、阴影
IBInspectable 和 IB_DESIGNABLE
盒子模型（网页内容设计、美化）
边框
箭头布局——有边框
CSS入门二
CSS盒子模型
边框
UISegmentedControl 去边框、去竖线、圆角、字体

一、基础部分

<!DOCTYPE html> <!--声明文档类型html5版本 具有向下兼容低版本的功能-->
<html>
<head><!--头部: 不可视区域，看不到内容-->
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  background-color:red;
  border:2px solid black; /*边框的大小 边框的样式 边框的颜色 */
  /*
   border-style:
      solid 实线
      dotted 点状线
      dashed 虚线
      double 双实线
   border-top: 控制上边框
   border-top-width: 上边框宽度
   border-top-style: 上边框样式
   border-top-color: 上边框颜色
   border-right: 控制右边框
   border-bottom: 控制下边框
   border-left: 控制做边框
  */
}
</style>
</head>
<body><!--身体可视区域-->
    <div id="mydiv" class="mydiv">
      
    </div>
</body>
</html>

image.png

二、案例部分

案例1

<html>
<head><!--头部: 不可视区域，看不到内容-->
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
div{
  /* width:100px; 去掉宽度默认占满一行*/
  height:100px;
  background-color:red;
}
</style>
</head>
<body><!--身体可视区域-->
    <div id="mydiv" class="mydiv">
      
    </div>
</body>
</html>

image.png

案例2

<html>
<head><!--头部: 不可视区域，看不到内容-->
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
div{
  width:100px; 
  height:100px;
  border:50px solid black;
  border-top-color:red;
  border-right-color:green;
  border-bottom-color:pink;
  border-left-color:blue;
}
</style>
</head>
<body><!--身体可视区域-->
    <div id="mydiv" class="mydiv">
      
    </div>
</body>
</html>

image.png

案例3

<html>
<head><!--头部: 不可视区域，看不到内容-->
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
div{
  width:0px; 
  height:0px;
  border:50px solid black;
  border-top-color:red;
  border-right-color:green;
  border-bottom-color:pink;
  border-left-color:blue;
}
</style>
</head>
<body><!--身体可视区域-->
    <div id="mydiv" class="mydiv">
      
    </div>
</body>
</html>

image.png

案例4

<html>
<head><!--头部: 不可视区域，看不到内容-->
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
div{
  width:0px; 
  height:0px;
  border:50px solid black;
  border-top-color:red;
  border-right-color:green;
  border-bottom-color:pink;
  border-left-color:blue;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-left-color:transparent;
  transition-duration:2s; /*过渡时间2秒*/
}
div:hover{
  transform:rotate(180deg) /*旋转180度*/
}
</style>
</head>
<body><!--身体可视区域-->
    <div id="mydiv" class="mydiv">
      
    </div>
</body>
</html>

image.png

三、注意事项

一、width不填默认是浏览器的宽度
二、border的属性值可以为none,但border-top,border-right,border-bottom,border-left的属性不可以为none
三、颜色的取值
1、英文单词:red green blue white black
例如: color:red;
2、16进制:1234567890abcdef
例如: color:#000
3、rgb
r:red 红色
g:green 绿色
b:blue 蓝色
取值情况：0-255
例如:rgb(0,0,0)
4、rgba
a:Alpha 透明度
取值在0到1 0代表完全透明，1代表完全不透明
例如:rgb(255,0,255,0.2)