css3能不能做出斜边“/”这样的, 简单的代码,单个div元素的边框

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3能不能做出斜边“/”这样的, 简单的代码,单个div元素的边框相关的知识,希望对你有一定的参考价值。

参考技术A 可以用旋转来做,不知道是不是最简单的,但是代码给你
transform: rotate(30deg);
旋转到你要的角度,然后单边给border就行了
参考技术B <div class="skew"></div>

.skew 
    transform: skewX(-30deg);

如果div里面的内容不想跟着动,可以给里面的内容加个容器,然后用skewX再扭回来

参考技术C div
width: 160px;height: 80px;border: 1px solid blue;
transform: rotateY(30deg) rotateX(-30deg);transition: all .5s;

div:hover
background-color: blue;

<div></div><div></div>

看看是不是你想要的效果

参考技术D 倾斜,transform:rotate追答

+10086

第5个回答  2018-05-14 边框?那就是border

零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面

原文:零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面

本章将交大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面
让你五分钟就能快速做出一个登入画面

?

本章将教大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面

让你五分钟就能快速做出一个登入画面

?

范例内有文字方块可以输入文字,以及密码栏:

打错字了....不知道有没有人发现= =

?

01

开启一个新专案,并且调整LayoutaRoot的颜色

Brushes->Background->Gradient brush( 0% #FF481950、24% #FF321637、100% #FF141416 )

技术分享图片

?

02

接着放入一个TextBlock

Asset->Search->TextBlock

技术分享图片

?

并且在TextBlock内放入文字,你可以到这个网址的页面Copy一段文字回来

请把文字大小调整为 8pt

技术分享图片

?

行高设定为18pt, 靠左对齐

技术分享图片

?

03

再来,我们要调整文字所呈现的颜色

请选取文字後到Brushes->Foreground->Gradient brush

调整文字外观为( 0% FF000000、100% #FFFFFFFF)

?

接着调整透明度Alpha,请到Brushes->OpacityMask

调整文字透明度为 (0% #FFFFFFFF Alpha 41%、45% #FFFFFFFF Alpha 10%、100% #FFFFFFFF Alpha 95%)

?

都调整完成後,应该会如下图

技术分享图片

?

04

以同样方法再置入一个TextBlock,并且打上Member Login

运用Seletion工具(快捷键V),把Member Login做倾斜调整

技术分享图片

?

05

在文字上单击右键选择Path->Convert to Path,把刚刚键入的文字变成Path

技术分享图片

?

已经变为Path的文字,使用Direct Seletion(快捷键A)时,你可以看到有很多的控制节点

技术分享图片

?

拖动节点间线段,拉开节点间的间距,如下图范例

技术分享图片

?

运用Pen工具,增加控制节点,好拖拉成等等的登入视窗

技术分享图片

?

增加完控制节点後,拖拉成下图

技术分享图片

?

06

使用刚刚所教的方法更改颜色

并且运用Gradient Tool(快捷键G)调整渐层的方向

忘记Gradient Tool怎麽用了吗?请看这里

技术分享图片

?

调整成如下图范例,做出立体感

技术分享图片

?

07

放入一个TextBoxPasswordBox以及一个Button

技术分享图片

?

完成後,按下F5看看你的成果

技术分享图片

?

范例专案下载

?

?

本篇的教学就到此。

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

 

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

 

 




以上是关于css3能不能做出斜边“/”这样的, 简单的代码,单个div元素的边框的主要内容,如果未能解决你的问题,请参考以下文章

嵌入式LINUX文件系统 能不能做出通用文件系统,不依赖于板子!提炼出文件系统的通行

下载了一个轮播效果的css文件,请问怎样搬到淘宝店铺做出轮播效果,谢谢!

使用CSS3生成一个会旋转的太极八卦图

实现css中三角形写法

css3能不能实现JQ里的slideDown和slideUp的效果

python-求直角三角形斜边