border-radius编程练习1-3

我们刚学了圆角的知识，那么我们运用圆角的知识来实现下图所要求的效果：

参考代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>border-radius案例</title>

  <meta name='description' content='border-radius案例'>

  <meta name='keywords' content='border-radius案例'>

  <style>

    /* 此处写代码 */

    div {

      width: 400px;

      height: 300px;

      border: 1px solid red;

      -webkit-border-radius: 20px 10px 60px 10px;

      -moz-border-radius: 20px 10px 60px 10px;

      -o-border-radius: 20px 10px 60px 10px;

      border-radius: 20px 10px 60px 10px;

      margin: 0 auto;

    }

  </style>

  <script>

  </script>

</head>

<body>

  <!-- 此处写代码 -->

  <div></div>

</body>

</html>

border-radius编程练习1-3的更多相关文章

  1. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  2. 为什么要使用sass

    或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...

  3. 前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令

    一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...

  4. 如何高效的阅读uni-app框架？（建议收藏）

    作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,ma ...

  5. 前端Tips#3 - 简写的 border-radius 100% 和 50% 是等效的

    本文同步自 JSCON简时空 - 技术博客,点击阅读 视频讲解 视频地址 文字讲解 1.先讲结论 border-radius 这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角 ...

  6. jquery/zepto 圣诞节雪花飞扬

    下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jque ...

  7. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  8. jQuery实践——属性和css篇

    属性: attr html:<div>demo1</div> jQuery:$("div").attr("id","demo1 ...

  9. Designing for iOS: Graphics & Performance

    http://robots.thoughtbot.com/designing-for-ios-graphics-performance  [原文] In the previous article, w ...

  10. Quartz2D复习（一）--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

    1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core  Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...

随机推荐

  1. devops-jenkins分布式构建

    1. devops-jenkins分布式构建 1) 点击系统管理 进入节点管理 2) 点击新建节点 3) 进行节点配置在node节点服务器配置,进行java的安装 [root@nginx-backup ...

  2. Linux操作系统（第二版）（RHEL 8/CentOS 8）——勘误表

    Linux操作系统(第二版)(RHEL 8/CentOS 8)--勘误表 http://www.tup.tsinghua.edu.cn/booksCenter/book_08172501.html 本 ...

  3. 为什么在M3架构中 PC总是返回加4

    由于CPU是3级流水线的方式运行.在执行第一条指令时候,已经对第二条指令译码,对第三条指令取值. PC总是指向正在取值的指令.由于在M3架构中,采用Thumb-2指令,每个指令占据2个字节,所以PC总 ...

  4. reids等非关系数据库管理工具treesoft

    先下载treesoft 链接:https://pan.baidu.com/s/1o8UPK7lF0-WvE9afoR0sWw 提取码:3uc3 下载好之后进行解压文件 解压完成后目录结构 将webap ...

  5. Mysql架构与内部模块-第二章

    接上文,上文简述到了Mysql中的查询缓存和解析器,今日我们继续. 先来看一段SQL:SELECT * FROM `jianghuadong`; 先假设我们数据库中并没有一张名为jianghuadon ...

  6. 还不会ida*算法?看完这篇或许能理解点。

    IDA* 算法分析 IDA* 本质上就是带有估价函数和迭代加深优化的dfs与,A * 相似A *的本质便是带 有估价函数的bfs,估价函数是什么呢?估价函数顾名思义,就是估计由目前状态达 到目标状态的 ...

  7. C语言/C++编译环境的设置！有的人还没开始就卡住了！

    本地环境设置 如果您想要设置 C++ 语言环境,您需要确保电脑上有以下两款可用的软件,文本编辑器和 C++ 编译器. 文本编辑器 这将用于输入您的程序.文本编辑器包括 Windows Notepad. ...

  8. 字节跳动2020Java面经,你离高薪就只差一片面试题了

    前言 经历了惨痛的春招与秋招之后,也积攒了一些面经,希望能对大家有所帮助.由于字数限制需要答案的可以关注GZH[程序员空间] 免费领取完整版PDF 其他 什什么是幂等?什什么情况下需要考虑幂等?你怎么 ...

  9. 实战三：将nacos作为配置中心

    一,引入nacos配置中心依赖 <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId&g ...

  10. Appium常用操作之「元素定位、swipe 滑屏操作」

    坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.打开 uiautomatorviewer 二.Appium 常用操作 1.用 layui 做 ...