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. JVM性能调优（3） —— 内存分配和垃圾回收调优

    前序文章: JVM性能调优(1) -- JVM内存模型和类加载运行机制 JVM性能调优(2) -- 垃圾回收器和回收策略 一.内存调优的目标 新生代的垃圾回收是比较简单的,Eden区满了无法分配新对象 ...

  2. Avoid mutating a prop directly since the value will be overwritten whenever the parent component re

    子组件修改父组件的值踩坑 Vue1.0升级至2.0之后,直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据. 我们都知道在vue中,父组件传入子组件的变量是存放在props属性 ...

  3. 用redis当作LRU缓存

    原文地址:https://redis.io/topics/lru-cache Redis可以用来作缓存,他可以很方便的淘汰(删除)旧数据添加新数据,类似memcached.LRU只是其中的一种置换算法 ...

  4. K8S节点异常怎么办？TKE"节点健康检查和自愈"来帮忙

    节点健康检测 意义 在K8S集群运行的过程中,节点常常会因为运行时组件的问题.内核死锁.资源不足等各种各样的原因不可用.Kubelet默认对节点的PIDPressure.MemoryPressure. ...

  5. JSX 详解

    一 jsx 的本质是什么? jsx是语法糖,需要被编译成js才能运行. jsx 看似是html 结构,实质是js结构的语法糖,在代码编译阶段被编译成js结构.所以jsx的本质可描述为看似html结构的 ...

  6. 习题3-5　谜题（Puzzle, ACM/ICPC World Finals 1993, UVa227）

    #include<stdio.h> #include<string.h> char s[5][5]; int main() { while(gets(s[0])) { int ...

  7. super函数

    Python面向对象中super用法与MRO机制:https://www.cnblogs.com/chenhuabin/p/10058594.html python 中 super函数的使用:http ...

  8. 联赛模拟测试18 A. 施工 单调队列（栈）优化DP

    题目描述 分析 对于 \(Subtask\ 1\),可以写一个 \(n^3\) 的 \(DP\),\(f[i][j]\) 代表第 \(i\) 个建筑高度为 \(j\) 时的最小花费,随便转移即可 时间 ...

  9. Mysql数据库分布式事务XA详解

    XA事务简介 XA 事务的基础是两阶段提交协议.需要有一个事务协调者来保证所有的事务参与者都完成了准备工作(第一阶段).如果协调者收到所有参与者都准备好的消息,就会通知所有的事务都可以提交了(第二阶段 ...

  10. PHP SPL标准库-迭代器

    通过某种统一的方式遍历链表或者数组中的元素的过程叫做迭代遍历,这种统一的遍历工具我们叫做迭代器. PHP中迭代器是通过Iterator 接口定义的. ArrayIterator迭代器 foreach ...