Web应用界面(边框样式)

本节课通过一个简单的Web应用的命令按钮设计，复习前面学习的样式知识。应用界面的设计和内容页的设计是不同的， Web应用界面的设计和客户端的软件应用界面视觉效果类似，只是编写方式依赖于HTML和CSS。

完整代码

涉及的细节较多，可以观看视频，从零一步步实现，同时学习WebStorm的操作技巧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .command{
            border: 1px solid black;/*设置外边框显示样式*/
            width: 50px;
            border-radius: 5px;/*外边框圆角*/
            font-family: 宋体;
            font-size: 10px;
            background-color: #aaaaaa;
        }
        .bottom{
            border-bottom: 1px solid black;/*设置外边框底部bottom线条显示样式*/
        }
        .padding{
            padding: 4px;/*内边距*/
        }
        .padding:hover{  /*鼠标hover事件*/
            background-color: #cccccc;
        }
        .top-radius{
            border-top-right-radius: 5px;/*右上角圆角*/
            border-top-left-radius: 5px/*左上角圆角*/
        }
        .bottom-radius{
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px
        }
    </style>
</head>
<body style="background-color: #777777">
<div class="command">
    <div class="bottom padding radius top-radius">点</div>
    <div class="bottom padding">直线</div>
    <div class="bottom padding">闭合直线</div>
    <div class="bottom padding">三角面</div>
    <div class="padding bottom-radius">三角带</div>
</div>
</body>
</html>

相关知识点

边框样式

相关知识查看《CSS盒子模型》

边框默认是不显示的，边框样式border支持四个方向上的自定义

语句	意义
border: 1px solid black;	边框四周均显示
border-bottom: 1px solid black;	定义边框底部线条
border-top: 1px solid black;	定义边框顶部线条
border-left: 1px solid black;	定义边框左侧线条
border-right: 1px solid black;	定义边框右侧线条

边框圆角，一次定义四个圆角，或分别定义

语句	意义
borderradius: 5px;	边框四个圆角大小5px
border-top-right-radius: 5px;	右上角圆角
border-top-left-radius: 5px	左上角圆角
border-bottom-left-radius: 5px;	左下角圆角
border-bottom-right-radius: 5px;	右下角圆角

hover

hover选择器的作用是当鼠标经过hover定义的一个元素的时候，该元素就会显示hover大括号里面定义的样式。如果你现在不知道什么是CSS选择器也没关系，先使用有个印象。

按钮设计

按钮设计和内容展示不同，上面为了体现一个div元素从视觉上看着是一个按钮，首先加了边框，加了背景颜色，同时设置了内边距padding让字体占有的面积小，把字体设置比平时的内容网页使用的字体小，自己可以练习体会。