下のように、4つの値を指定した場合は、左上から時計回りに指定した値が適用される。
#box { border-radius: 40px 160px 80px 120px; }
表示例
#box { border-radius: 40px 160px 80px 120px; }
angular.module('app', ['ngRoute', 'ngResource']) .run(function ($rootScope, $location, $timeout) { $rootScope.$on('$viewContentLoaded', function () { $timeout(function () { componentHandler.upgradeAllRegistered(); }); }) })
div.remove { opacity: 0; height: 0; transition-duration: 2s; } div.show { opacity: 1; height: 200px; transition-duration: 2s; }フェードイン、フェードアウト対象の要素の定義とJavaScriptの内容。
<div id="target"> 要素 </div> <button type="button" id="remove">削除</button> <button type="button" id="add">表示</button> <script> var removeBtn = document.getElementById('remove'); var addBtn = document.getElementById('add'); var div = document.getElementById('target'); removeBtn.addEventListener("click", function() { div.className = 'remove'; }); addBtn.addEventListener("click", function() { div.style.display = ''; div.className = 'show'; }); </script>
<!-- スタイル定義 --> <style> #one { box-sizing: content-box; width: 200px; height: 200px; border: 10px solid black; } #two { box-sizing: border-box; width: 220px; height: 220px; border: 10px solid black; } </style> <!-- html --> <div id="one"></div> <div id="two"></div>