html图形与表单表格

最新推荐文章于 2022-05-07 20:09:08 发布

VIP文章 Tw368WJZ

最新推荐文章于 2022-05-07 20:09:08 发布

阅读量278

点赞数

分类专栏： html 布局图形样式

本文链接：https://blog.csdn.net/Tw368WJZ/article/details/79477305

版权

html图形与表单表格

七拼八凑

1.给这个DIV的样式加一条：cursor:pointer鼠标指向时会
出现小手
2.CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/></span>  
3.CSS鼠标由系统自动给出效果 <a href="#" style="cursor:auto">CSS鼠标由系统自动给出效果</a><br/></span>  
4.CSS鼠标十字型 效果 <a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a><br/></span> 
5.CSS鼠标I字型效果 <a href="#" style="cursor:text">CSS鼠标I字形效果</a><br/></span>  
6.CSS鼠标等待效果 <a href="#" style="cursor:wait">CSS鼠标等待效果</a><br/></span>  
7.CSS鼠标默认效果 <a href="#" style="cursor:default">CSS鼠标默认效果</a><br/></span>  
8.CSS鼠标向右的箭头效果 <a href="#" style="cursor:e-resize">CSS鼠标向右的箭头效果</a><br/></span>  
9.CSS鼠标向右上箭头效果 <a href="#" style="cursor:ne-resize">CSS鼠标向右上箭头效果</a><br/></span> 
10.CSS鼠标向上箭头效果 <a href="#" style="cursor:n-resize">CSS鼠标向上箭头效果</a><br/></span> 
11.CSS鼠标向左上箭头效果 <a href="#" style="cursor:nw-resize">CSS鼠标向左上箭头效果</a><br/></span>
12.CSS鼠标向左箭头效果 <a href="#" style="cursor:w-resize">CSS鼠标向左箭头效果</a><br/></span>
13.CSS鼠标向左下箭头效果 <a href="#" style="cursor:sw-resize">CSS鼠标向左下箭头效果</a><br/></span>
14.CSS鼠标向下箭头效果 <a href="#" style="cursor:s-resize">CSS鼠标向下箭头效果</a><br/></span> 
15.CSS鼠标向右下箭头效果 <a href="#" style="cursor:se-resize">CSS鼠标向下箭头效果</a><br/></span>

#### 1.多边形形成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
    div{
        width: 100px;
        height: 100px;
        background-color: #333;
        float: left;
        margin-right: 10px;
    } 
    .clip-path1 {
        clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
    }
    .clip-path2 {
        clip-path: polygon(20% 0,80% 0,100% 100%,0 100%);
    }
    .clip-path3 {
        clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
    }
    .clip-path4 {
        clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
    }
    .clip-path5 {
        clip-path: polygon(50% 0, 90% 20%,100% 60%,75% 100%,25% 100%,0

最低0.47元/天解锁文章

Tw368WJZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html图形与表单表格

html图形与表单表格七拼八凑1.给这个DIV的样式加一条：cursor:pointer鼠标指向时会出现小手2.CSS鼠标手型效果 &lt;a href="#" style="cursor:hand"&gt;CSS鼠标手型效果&lt;/a&gt;&lt;br/&gt;&lt;/span&gt; 3.CSS鼠标由系统自动给出效果 &lt;a href="#&quot
复制链接

扫一扫